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本 书 从 WPF 技术 的 设计 原则 出 发 ,介绍 WPF 中 XAML 的 语法 结构 ,布局 方式 .常用 控件 .数据 驱动 
UI 的 理念 .路 由 事件 .图 形 基础 动画 与 媒体 ,动作 原则 ,资源 与 样式 及 MVVM 设计 模式 ,并 通过 大 量 的 案 
例 向 读者 展示 WPF 的 设计 思想 。 案 例 组 织 采用 分 层 递 进 释 加 方式 ,让 程序 从 小 变 大 ,由 易 到 难 ,能 够 使 读 
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WPF 技术 。 

本 书 既 可 作为 高 等 学 校 计算 机 专业 UI 设计 、 软 件 开发 .人 机 交互 技术 等 课程 的 教材 ,也 可 作为 计算 机 
从 业 人 员 的 参考 书 。 
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WPF(Windows Presentation Foundation) 是 专门 用 来 编写 程序 表示 层 的 技术 和 工具 。 
它 是 微软 新 一 代 图 形 展示 系统 ,是 用 户 界面 技术 进步 的 重要 标志 。 使 用 WPF 编写 的 程序 
比 之 前 的 WinForm 程序 更 加 简洁 清晰 。WPF 技术 适用 于 微软 平台 下 的 桌面 系统 、 浏 览 器 、 
Windows Phone 的 开发 。 因 为 微软 程序 的 开发 理念 都 一 样 , 仅 在 类 库 方面 有 一 些 差别 。 

本 书 详细 介绍 WPF 中 XAML 的 语法 结构 ,布局 方式 .常用 控件 .数据 驱动 UI 的 理念 、 
路 由 事件 、 图 形 基 础 ,动画 与 媒体 、 动 作 原 则 、 资 源 与 样式 及 MVVM 设计 模式 ,并 通过 大 量 
的 案例 向 读者 展示 WPF 的 设计 思想 。 案 例 组 织 采 用 分 层 递 进 和 至 加 方式 ,让 程序 从 小 变 大 ， 
由 易 到 难 , 能 够 使 读者 迅速 地 熟悉 编写 程序 的 思想 路 径 ,体会 到 编写 程序 的 乐趣 。 全 书 共 
12 章 , 前 4 章 是 有 关 WPF 基础 的 编程 内 容 和 界面 Ul 设计 ,从 第 5 章 开 始 是 WPF 的 高 级 
进 阶 。 各 章 内 容 概述 如 下 。 

第 1 章 介绍 WPF 的 编程 机 制 。 采 用 逐 层 深入 的 Button 案例 ,讲解 WPF 平台 特性 。 
通过 对 WPF 的 运行 机 制 及 类 层次 结构 讲解 ,从 而 认识 WPF 的 体系 结构 。 

第 2 章 介 绍 XAML 可 扩展 的 应 用 程序 声明 式 语言 的 树 形 结构 .复杂 属性 .附加 属性 、 
xmlns 指令 和 名 称 空间 中 的 标记 扩展 等 。 

第 3 章 详细 介绍 WPF 布局 原则 及 各 布局 面板 的 适用 场合 。 重 点 说 明 Grid 从 结构 中 分 
离 布局 .尺寸 模型 .共享 尺寸 组 .跨越 行列 等 特征 ,并 演示 了 Grid 的 多 种 用 法 。 

第 4 章 介绍 WPF 控件 内 容 模型 和 模板 的 新 概念 。 重 点 说 明 元 素 合成 、 富 内 容 和 简单 
的 编程 模型 的 控件 原则 。 在 此 基础 上 ,学 习 WPF 的 内 置 控件 。 

第 5 章 介 绍 数据 驱动 模型 .数据 绑 定 原理 及 数据 绑 定 的 用 法 。 

第 6 章 从 Windows 操作 系统 的 消息 机 制 出 发 ,介绍 事件 模型 。 在 WPF 中 引入 路 由 事 
件 机 制 , 可 采用 冒 泡 、 隧 道 、 直 接 3 种 策略 。 

第 7 章 从 常用 的 几何 图 形 元 素 出 发 ,介绍 绘制 图 画 、2D 形状 及 属性 ,让 读者 进一步 认识 
WPF 3D 三 维 空间 坐标 系 、 模 型 材质 、 光 源 、 照 相机 和 变换 。 

第 8 章 介 绍 动画 工作 原理 。WPF 动画 根据 计算 机 的 性 能 和 当前 进程 的 繁忙 程度 , 尽 可 
能 地 增 大 帧 率 , 比 传统 动画 流畅 ,实现 方式 简捷 。 同 时 还 介绍 WPF 中 动画 的 常用 类 型 、 集 
成 方式 和 对 音频 与 视频 文件 的 播放 方式 。 

第 9 章 介 绍 动作 使 用 原则 、 命 令 系统 及 触发 器 使 用 方式 。 

第 10 章 介绍 资源 的 定义 资源 类 型 .适用 范围 .资源 的 静态 与 动态 引用 方式 。 特 别 强调 
资源 字典 要 遵循 “ 先 创建 后 使 用 ”的 规则 。 
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第 11 章 重 点 介绍 样式 的 构成 .如何 使 用 样式 及 模板 ,并 演示 WPF 实现 换 肤 的 操作 
步骤 。 

第 12 章 介 绍 软 件 设 计 模 式 的 起 源 、 概 念 和 原则 。 对 比 MVC. MVP 和 MVVM 3 种 设 
计 模 式 的 通信 方式 的 差别 ,重点 讲解 MVVM 设计 模式 的 框架 .其 三 大 组 件 内 容 结构 ,用 基 
于 MVVM 模式 的 计算 器 案例 证 明 WPF 数据 驱动 UI 的 设计 思想 。 

本 书 由 刘 晋 钢 主编 ,其 中 第 1、4、12 章 由 刘 晋 钢 编写 ,第 2、3 章 由 能 风光 编写 ,第 6,7 章 
由 况 立 群 编写 ,第 8.9 章 由 刘 晋 霞 编写 ,第 10.11 章 由 张 麟 华 编写 ,第 5 章 由 李 丽 编写 。 

本 书 既 可 作为 高 等 学 校 计算 机 专业 学 生 用 书 , 也 可 作为 计算 机 从 业 人 员 的 参考 书 。 作 
为 教材 ,本 书 既 适用 于 计算 机 专业 UI 设计 、 软 件 开 发 、 人 机 交互 技术 等 课程 ,也 可 供职 业 技 
术 学 院 计 算 机 专业 学 生 使 用 。 通 过 本 书 的 学 习 , 读 者 可 以 掌握 WPF 的 核心 技术 ,提升 程序 
设计 能 力 ,为 以 后 的 工作 和 研究 打下 坚实 的 基础 。 

读者 可 在 清华 大 学 出 版 社 网 站 (www. tup. com. cn) 免 费 下 载 本 书 所 有 案例 的 源 代 码 、 
与 本 书 配套 的 电子 课件 以 及 习题 参考 答案 。 使 用 本 书 时 , 遇 到 资源 下 载 问 题 , 请 联系 责任 编 
辑 fuhy@tup. tsinghua. edu. cn 或 联系 本 书 作 者 84161924 @qq. com, 

在 此 ,特别 感谢 刘 子 民 对 本 书 提供 的 技术 支持 和 帮助 ,也 感谢 本 书 的 责任 编辑 付 弘 宇 对 
本 书 所 做 的 审核 工作 。 由 于 编者 的 水 平 有 限 , 书 中 难免 存在 不 足 之 处 ,恳请 广大 读者 批评 
指正 。 

教学 建议 

根据 突出 应 用 的 原则 ,从 应 用 层次 要 求 角 度 考 虑 ,可 把 “WPF 编程 基础 ”课程 的 教学 内 
容 分 为 基础 学 习 内 容 ,高 级 进 阶 内 容 和 提升 应 用 研发 能 力 三 部 分 。 

基础 学 习 : 本 书 的 前 4 章 内 容 是 有 关 WPF 基础 的 编程 内 容 和 界面 UI 设计 。 详 细 介绍 
WPF 中 XAML 的 语法 结构 ,布局 方式 和 常用 控件 ,涵盖 WPF 的 新 特性 、 体 系 结构 `.XAML 
基础 语法 知识 .XAML 文档 的 树 形 结构 和 常用 属性 ,以 及 WPF 布局 原则 及 布局 面板 .WPF 
控件 模型 模板 及 常用 控件 。 学 完 前 4 章 , 读 者 可 以 做 出 赏心悦目 的 用 户 界面 。 

高 级 进 阶 : 本 书 的 第 5 章 到 第 9 章 是 WPF 的 高 级 进 阶 。 详 细 介 绍 数据 驱动 UI 的 理 
念 ,图 形 基 础 动画 与 媒体 和 动作 原则 。 这 部 分 内 容 涉 及 WPF 的 核心 技术 ,将 事件 驱动 模 
型 提升 到 数据 驱动 UI 的 理念 上 来 ,让 UI 与 业务 罗 辑 真正 地 分 离 ,并 使 前 台 的 设计 师 和 后 
台 的 程序 员 各 司 其 职 。 

提升 应 用 : 本 书 的 第 10 章 到 第 12 章 是 提升 学 生 应 用 能 力 部 分 。 详 细 介绍 资源 的 类 
型 .引用 方式 、 资 源 字 典 、 样 式 的 构成 、 使 用 样式 的 方法 、 模 板 及 MVVM 设计 模式 。 目 前 学 
生 开 发 的 不 少 项 目 多 半 都 废弃 , 究 其 原因 主要 是 ,资源 分 配 不 合理 ,样式 不 美观 ,没有 采用 好 
的 设计 模式 。 这 部 分 内 容 针对 上 述 问题 编写 ,以 提高 学 生 的 应 用 研发 能 力 。 

本 书 用 于 教学 的 建议 如 表 1 所 示 。 


表 1 教学 建议 





课程 名 WPF 编程 基础 (授课 对 象 可 以 是 计算 机 科学 与 技术 、 软 件 工程 等 专业 理工 类 
(授课 对 象 ) 四 年 制 本 科 )48 学 时 。 注 : 三 年 制 专科 可 参考 此 计划 适当 修改 (例如 ,可 延长 
到 64 学 时 ,难度 适当 降低 ) 
掌握 WPF 核心 技术 、 体 系 结构 、 数 据 驱动 UI 的 设计 思想 及 MVVM 设计 模 
TERRORE 式 ,为 提升 程序 开发 能 力 葛 定 基础 
























































前 言 
续 表 
必要 的 先 修 课程 数据 结构 ,操作 系统 和 面向 对 象 程序 设计 语言 (如 CH) 
后 续 可 开设 实践 课程 WPF 项 目 实 训 、 基 于 Kinect 的 体感 设计 及 手势 识别 项 目 研发 
章 次 (学 时 ) 要 求学 生 了 解 内 容 要 求学 生 掌握 内 容 实践 操作 项 目 
第 1 章 引言 (2) WPF 的 地 位 、 体 系 结 | WPF 的 新 特性 ,布局 | 数据 集成 处 理 能 力 章节 
构 及 应 用 前 景 与 控件 中 涉及 的 容器 | 中 的 Button 导出 的 案例 
控件 的 简单 用 法 
第 2 章 XAML(2) XAML 5 HTML 的 异 | XAML 的 名 称 空间 及 | 仿 类 型 转换 器 中 案例 , 重 
同 点 .XAML 文档 的 树 | 属性 、 类 型 转换 器 的 | 做 一 个 将 字符 串 转换 成 
形 结构 用 法 对 象 实例 
第 3 章 布局 (4) 合成 布局 模型 .布局 机 | 布局 面板 的 用 法 ,布局 | 生活 中 常见 的 布局 应 用 
制 ,布局 常用 属性 wE (聊天 室 、Web 等 ) 
第 4 章 控件 (4) 元 素 合成 、 富 内 容 和 简 | WPF 控件 的 基本 用 | 图 标 设 计 、 登 录用 户 页 
单 的 编程 模型 的 控件 | 法 、 构 建 控 件 的 思想 、| 面 ` 游 戏 初始 化 页 面 、 桌 
原则 用 户 自 定义 控件 面 、 主 题 页 面 等 
第 5 章 数据 (6) 数据 模型 的 发 展 过 程 | 数据 绑 定 机 制 、 值 转换 | INotifyPropertyChanged 
及 微软 曾 用 过 的 数据 | 机 制 、 数 据 绑 定 模 型 、| 接口 调用 .数据 绑 定 列 
模型 数据 绑 定 用 法 表 框 
第 6 章 路 由 事件 (6) | 消息 概念 ,消息 循环 、| 路 由 事件 工作 机 制 、 实现 自 定义 路 由 事件 ,分 
Windows 编程 原理 \ 附 | RoutedEventArgs 类 、 路 | 别 采用 隧道 \, 冒 泡 和 直接 
加 事件 由 策略 3 种 策略 
第 7 章 图 形 基础 (4) 常用 几何 图 形 .在 WPF | WPF 图 像 特效 .绘制 | 使 用 MeshGeometry3D 
3D 中 的 基本 概念 , 包 | 图 画 、 控 件 与 形状 组 | 定义 模型 ,创建 三 维 物体 
括 WPF 的 坐标 系 、 各 | 合 、 常 用 变换 
种 光源 和 照相 机 的 工 
作 原 理 
第 8 章 动画 与 媒体 (2) | 动画 的 概念 .原理 , 传 | 线性 插值 动画 .关键 帧 | 设计 简单 的 动画 
统 动画 与 WPF 动画 异 | 动画 .路径 动 画 ,动画 
同 点 集成 
第 9 章 动作 (6) 动作 原则 、 命 令 系统 的 | 使 用 各 种 触发 器 .命令 | 实现 Windows 记事 本 
基本 元 素 及 元 素 间 的 | 与 数据 绑 定 功能 
关系 、WPF 命令 库 
第 10 章 资源 (4) 资源 的 定义 、 资 源 的 类 | 资源 的 静态 引用 与 动 | 使 用 资源 字典 
型 .资源 的 可 用 范围 、| 态 引 用 方式 、 创 建 和 使 
使 用 资源 的 意义 用 资源 字典 
第 11 章 样式 (4) 样式 的 作用 定制 模板 、 使 用 样式 的 | 设置 主题 、 锁 屏 、 更 换 壁 
方法 纸 (皮肤 ) 
第 12 章 MVVM 设计 | 软件 设计 模式 的 概念 、| MVVM 设计 模式 的 框 | 完成 基于 MVVM 的 简 
模式 (4) E WW. dick. MVC, | 架 及 其 三 大 组 件 内容 | 单 计 算 器 ,并 为 该 计算 器 
MVP fll MVVM 发 展 | 结构 及 该 模式 的 优点 | 的 按钮 设计 统一 风格 的 
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引言 


WPF( Windows Presentation Foundation) 是 微软 新 一 代 图 形 展示 系统 ,是 用 户 界面 技 
术 进 步 的 重要 标志 。 本 章 向 读者 呈现 WPF 平台 的 主要 功能 ,也 可 视 作 本 书 其 他 章节 的 缩 
写 版 。 对 于 初学 者 ,第 1 章 有 一 定 的 难度 ,因此 可 以 从 第 2 章 学 起 ,借助 后 续 分 层 递 进 式 案 
例 , 回 过 头 来 再 阅读 本 章 内 容 ,会 带 给 读者 一 种 荐 然 开朗 的 感觉 。 


1.1 全 新 的 图 形 用 户 系 统 


WPF 提供 统一 的 编程 模型 .语言 和 框架 ,还 有 全 新 的 多 媒体 交互 用 户 图 形 界 面 ,如 
图 1.1 所 示 。 





图 1.1 WPF DEMO 


WPF DEMO 集成 了 类 似 于 Windows 8 样式 按钮 的 风格 ,支持 触摸 以 及 数据 绑 定 。 下 
面 首先 回顾 Windows Form 托管 对 象 模型 下 的 “Hello Form” 程 序 , 代 码 如 下 。 


using System; 
using System. Windows. Forms; 
namespace WindowsFormsApplicationl 
{ static class Program 
i [STAThread] 
static void Main() 
{ Form form- new Forn(); 
form.Text - "Hello Forn"; 
Application. Run( form); 
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尽管 WPF 被 视 为 全 新 的 图 形 用 户 系统 ,但 它 还 是 保留 着 与 Windows Form 程序 类 似 
的 风格 ,对 上 述 代码 做 部 分 修改 。 


using System; 
using System. Windows; 
namespace WPF 
{ static class Program 
{ [STAThread] 
static void Main() 
{ Window form = new Window(); 
form. Title = "Hello Form"; 
new Application().Run(form); 


) 


在 WPF 环境 下 ,该 程序 无 语法 错误 ,但 是 编译 时 报错 ,错误 类 型 是 编译 后 的 . obj 文件 
中 也 包含 了 一 个 Main() ,程序 出 现 了 两 个 人 口 ,不 能 运行 。 众 所 周知 ,Main() 是 C# 程 序 的 
入 口 。 在 后 续 的 学 习 中 ,读者 将 了 解 到 ,WPF 程序 默认 的 启动 窗 体 是 MainWindow()。 也 
许 读者 会 有 这 样 的 疑问 ,编译 时 生成 的 Main() 和 MainWindow() 是 不 是 有 冲突 呢 ? 其 实 
WPF 的 入 口 并 不 是 MainWindow, 而 是 App. xaml 中 的 App 类 。 第 12 章 将 通过 案例 让 读 
者 再 深入 理解 WPF 的 运行 机 制 。 

WPF 需 运 行 在 . NET Framework 3. 0 以 上 版 本 ,给 用 户 界 面 .2D/3D 图 形 、 文 档 和 媒体 
提供 统一 的 描述 和 操作 方法 ,并 且 支 持 DirectX 9/10 技术 。 

WPF 是 基于 矢量 (Vector-based) 的 合成 系统 ,这 就 意味 着 它 支 持 旋转 ,缩放 等 各 种 变 
换 , 这 些 变换 均 可 作用 于 控件 ,使 控件 可 以 正常 工作 。 


1.2 XAML 编程 模型 





XAMLCeXtensible Application Markup Language, 可 扩展 应 用 程序 标记 语言 ) 编 程 模 
型 ,类似 于 HTML(CHyper Text Markup Language, 超 级 文本 标记 语言 ) 编 程 模型 , 它 继承 了 
Web( Website 的 缩写 ) 开 发 的 特性 。Web 开发 的 优点 是 : 为 内 容 创建 简单 的 入 口 , 基 于 
HTML 编程 。 下 面 说 明 HTML 5j XAML 两 者 之 间 的 异同 点 。 


1.2.1 HTML 


HTML 文档 制作 简单 ,但 功能 强大 ,支持 多 种 数据 格式 , 它 具 有 简单 灵活 、 平 台 无 关 性 、 
通用 性 强 等 多 种 优点 ,在 文本 文件 中 即 可 创建 HTML 标签 ,并 将 该 文件 命名 为 “welcome. 
html”, 代 码 如 下 。 


<html> 
X head» 
<title> hello Everyone </title> 
</head> 
<body> 
< p> Welcome to HTML!«/p» 
</body> 
</html > 
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诚然 ,上 面 所 有 的 标签 都 可 以 省 略 ,只 输入 一 行文 字 Welcome to HTML, 运 行 后 ,可 看 
到 的 浏览 器 模式 效果 如 图 1. 2 所 示 。 


1.2.2 XAML 


在 WPF 中 ,使 用 XAML 的 标记 格式 , 它 与 HTML 在 语法 结构 上 有 许多 相似 之 处 ,但 
两 者 之 间 最 显著 的 不 同 特征 是 : xmlns 指令 和 标记 扩展 。 

其 中 xmlns 指令 ,需要 在 标记 中 关联 名 称 空间 ,在 文本 文件 中 即 可 创建 XAML 标签 ， 
并 将 该 文件 命名 为 “welcome. xaml”, 代 码 如 下 。 


< FlowDocument 
xmlns = "http://schemas. microsoft. com/winfx/2006/xaml/presentation"> 
< Paragraph > Welcome to XAML </Paragraph> 

</FlowDocument > 


双击 该 文件 ,浏览 器 中 的 显示 效果 如 图 1. 3 所 示 。 
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图 1.2 运行 welcome. html 效果 图 1.3 运行 welcome. xaml 效果 


由 于 WPF 具有 xmlns 指令 ,需要 在 标记 中 关联 名 称 空间 , 故 Microsoft 的 . NET 
Framework 3. 0 就 已 经 具有 XAML 的 编程 模型 ,支持 XML(eXtensible Markup Language: 
可 扩展 置 标 请 言 ) 语 法 ,对 界面 进行 解释 。 因 此 ,XAML 可 以 视 为 针对 CLR Common 
Language Runtime, 公 共 语 言 运行 环境 ) 对 象 编写 。 它 基于 XML 的 脚本 语言 ,根据 映射 规 
则 将 XML 标签 转换 为 CLR 类 型 ,并 把 XML 属性 转换 为 CLR 属性 和 事件 。 在 后 续 的 章节 
中 ,展开 讲解 使 用 XAML 和 CH (在 后 面 章节 中 常 提 到 的 CS 代码 就 特 指 C# ) 创 建 对 象 并 
设置 其 属性 的 方法 。 

XAML 的 标记 扩展 新 特性 ,增加 了 程序 的 可 读 性 ,标记 扩展 以 CLR 类 型 实现 ,工作 方式 与 
CLR 属性 定义 一 致 。 标 记 扩展 放 在 花 括号 (} 中 ,将 在 第 2 章 中 进行 介绍 ,这 里 不 再 袭 述 。 

大 家 知道 ,在 XML 脚本 语言 中 ,只 存在 元 素 和 属性 两 个 空间 ,但 是 ,在 XAML 模型 中 ， 
有 对 象 . 属 性 和 事件 3 种 描述 ,接近 于 CLR 方式 。 这 样 , WPF 应 用 程序 可 由 Microsoft 
Visual Studio 和 Microsoft Expression 这 些 优秀 的 可 视 化 设计 工具 来 创建 。 

对 XAML 的 编程 模型 大 致 了 解 后 ,下 面 介绍 WPF 的 新 特性 。 


1.3 WPF 特性 


WPF 开发 有 很 多 种 方式 ,包括 标记 方式 浏览 器 方式 和 编码 方式 。 因 为 Microsoft 
Visual Studio 提供 可 视 化 设计 工具 ,从 本 节 开 始 , 书 中 的 所 有 程序 都 将 运行 在 Microsoft 
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Visual Studio 2010 平台 
在 创建 第 一 个 WPF 应 用 程序 之 前 


“新 建 ”一 项目 ”菜单 命令 时 ,会 弹出 新 寻 





, 先 启动 Visual Studio 2010 软件 。 使 用 “文件 ”一 





E WPF 应 用 程序 窗口 ,如 图 1. 4 所 示 。 在 该 窗口 左 


侧 模 板 列 表 中 选择 Visual C# 选 项 ; 在 窗口 中 间 的 下 拉 列 表 项 中 选择 . NET Framework 4 
选项 ; 并 选择 其 下 的 “WPF 应 用 程序 ?选项 。 在 名 称 文本 框 中 输入 Button_0, 此 时 Button_0 


就 是 解决 方案 名 称 。 
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图 1.4 新 建 WPF 应 用 程序 窗口 


在 图 1. 4 中 单 击 “确定 ”按钮 后 ,弹出 WPF 应 用 程序 开发 窗口 ,如 图 1.5 所 示 。 
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在 图 1.5 左上 部 分 有 MainWindow. xaml 和 MainWindow. xaml. cs 两 个 选项 卡 ,前 者 
是 用 于 设计 前 台 ULK XAML 文档 ; 后 者 是 负责 后 台 业 务 逻 辑 的 CS 文档 。 当 前 状态 下 ， 
系统 默认 XAML 文档 为 当前 的 工作 界面 ,所 以 MainWindow. xaml 高 亮 显示 ,在 窗口 左下 
方 是 其 编码 界面 。 在 窗口 右上 方 是 “解决 方案 管理 器 ”。 


1.3.1 布局 与 控件 


WPF 应 用 程序 的 开发 是 和 控件 关联 在 一 起 的 。 新 建 WPF 应 用 程序 ,命名 为 “Button. _ 
0”, 进 入 启动 页 面 后 ,在 解决 方案 管理 器 下 ,双击 MainWindow. xaml 文件 名 ,打开 该 文件 。 
该 文件 是 系统 自动 生成 的 。 首 先 看 到 了 Window 对 象 , 它 就 是 WPF 的 控件 。 下 面 从 大 家 
最 熟悉 的 控件 < Button > 开始 来 介绍 WPF 布局 与 控件 。 

在 < Grid > 与 </Grid > 之 间 输 入 < Button > First button </Button >, 代 码 如 下 。 


« Window x:Class = "Button. 0.MainWindow" 
xmlns = "http: //schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x "http: //schemas. microsoft. con/winfx/2006/xaml" 
Title = "MainWindow" Height = "350" Width = "525"» 
«Grid» 
« Button» First Button </Button > 
«/Grid» 
</Window > 


运行 这 段 代码 ,产生 如 图 1.6 所 示 的 效果 ,可 以 看 到 按钮 充满 窗口 整个 区 域 ,因为 使 用 
了 WPF 默认 的 Grid 布局 。 

在 WPF 中 所 有 的 控件 都 有 规定 好 的 布局 类 型 。 因 此 ,为 了 在 窗口 中 放置 更 多 的 控件 ， 
需要 使 用 容器 控件 。 将 < Grid > 更 换 成 < StackPanel > 布局 后 ,再 加 入 一 个 < Button >, 代 码 
如 下 。 


< Window x:Class = "Button. 0.MainWindow" 
xmlns = "http://schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x- "http: //schemas. microsoft. com/winfx/2006/xaml" 
Title = "MainWindow" Height = "350" Width = "525"> 
< StackPanel > 
< Button» First Button </Button > 
< Button > Second Button </Button > 
«/StackPanel > 
</Window > 


< StackPanel > 按照 控件 出 现 的 先后 顺序 ,从 上 往 下 摆 放 控件 ,进行 布局 ,运行 效果 如 
图 1.7 所 示 。 





图 1.6 Grid 布局 窗口 Button 图 1.7 StackPanel 布局 两 个 Button 
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为 了 深入 理解 < StackPanel > 的 布局 方式 ,再 加 入 < TextBox > 和 < TextBlock > 两 控件 ， 
代码 如 下 。 


« Window x:Class = "Button. 0.MainWindow" 
xnlns = "http: //schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x = "http: //schemas. microsoft. com/winfx/2006/xaml" 
Title = "MainWindow" Height = "350" Width = "525"> 
< StackPanel > 
< Button» First Button </Button > 
< Button > Second Button </Button > 
< TextBox > I am a TextBox </TextBox > 
< TextBlock > I am a TextBlock </TextBlock > 
</StackPanel > 
</Window> 


运行 上 面 的 代码 ,显示 页 面 效果 如 图 1. 8 所 示 。 
下 面 更 换 布局 ,将 < StackPanel > 替换 成 < WrapPanel >, 代 码 如 下 。 


< Window x:Class = "Button. 0.MainWindow" 
xmlns = "http: //schenas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x = "http://schemas. microsoft. con/winfx/2006/xaml" 
Title = "MainWindow" Height = "350" Width = "525"» 
< WrapPanel > 
< Button» First Button </Button > 
< Button > Second Button </Button > 
< TextBox > I am a TextBox «/TextBox > 
<TextBlock > I am a TextBlock </TextBlock > 
</WrapPanel > 
</Window> 


< WrapPanel > 按照 控件 出 现 的 先后 顺序 ,从 左 往 右 摆 放 控 件 ,进行 布局 ,运行 效果 如 
图 1.9 所 示 。 





(E3 MainWindow leek 
[Fest Button [Second Button) 1 am a TextBox 


Il am a TextBlock 

















图 1.8 StackPanel 布局 的 多 个 控件 排列 图 1.9 WrapPanel 布局 的 多 控件 排列 


通过 上 述 简单 案例 ,读者 初步 了 解 了 WPF 的 布局 和 控件 ,下 面 来 认识 一 下 WPF 的 数 
据 处 理 能 力 。 


1.3.2 数据 集成 及 处 理 能 力 


1. 数据 绑 定 机 制 
WPF 实现 控件 绑 定 数据 源 , 并 提供 多 种 数据 绑 定 的 方法 。 在 此 ,继续 使 用 上 述 Button 
示例 。 
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Button 绑 定 类 型 有 3 种 。 第 一 , 绑 定 类 型 决定 按钮 的 显示 方式 。 所 有 的 控件 都 有 一 个 
Resources( 资 源 ) 属性 。Resources 包括 Style CHE 3È), Templates (模板 ) 与 Resources 
Dictionary( 资 源 字 典 ) 。 第 二 ,按钮 内 容 的 数据 类 型 是 System. Object 对 象 ,按钮 能 获取 任 
何 数据 (包括 图 片 ) ,并 显示 内 容 。WPF 的 许多 控件 核心 就 是 Content Model( 内 容 模型 ) 机 
制 。 第 三 ,数据 绑 定 来 实现 Content Model( 内 容 模型 ) 。 

在 上 例 的 基础 上 ,添加 代码 来 实现 数据 绑 定 。 案 例 设 计 方 案 是 : 将 按钮 的 背景 设 成 黄 
色 ,当然 ,也 可 以 给 每 个 按钮 的 Background 属性 设 成 黄色 ,但 是 如 果 应 用 程序 中 有 许多 按 
钮 ,按钮 的 风格 要 保持 一 致 , 都 设 成 黄色 。 最 简单 的 方式 就 是 把 颜色 定义 放 到 Resources 属 
性 中 ,让 所 有 的 按钮 都 关联 该 属性 。 

TE Windows 中 定义 一 个 Resources ,在 控件 的 Resources 中 声明 一 个 对 象 ,并 为 这 个 对 
象 分 配 一 个 “x:Key”, 代 码 如 下 。 


« Window x:Class = "Button. 0.MainWindow" 
xmlns = "http: //schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x "http: //schemas. microsoft. con/winfx/2006/xaml" 
Title = "MainWindow" Height = "350" Width = "525"» 
< Window. Resources > 
< SolidColorBrush x:Key = "bg" Color = "Yellow" /> 
«/ Window. Resources > 
< WrapPanel > 
< Button Background = "(StaticResource bg}"> A first button </Button > 
< Button Background = "(StaticResource bg}" > A second button </Button > 
< TextBox I am a TextBox «/TextBox > 
< TextBlock > I am a TextBlock «/TextBlock > 
</WrapPanel > 
</Window > 


运行 这 段 代码 ,两 个 按钮 的 背景 都 成 为 黄色 ,显示 效果 如 图 1. 10 所 示 。 
资源 绑 定 是 数据 绑 定 中 比较 简单 的 内 容 , 下 面 将 TextBox 的 文本 属性 绑 定 到 
TextBlock 的 文本 属性 上 ,实现 代码 如 下 。 


« Window x:Class = "Button. 0.MainWindow" 
xmlns = "http: //schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x = "http: //schemas. microsoft. com/winfx/2006/xaml" 
Title = "MainWindow" Height = "350" Width = "525"» 
< Window. Resources > 
< SolidColorBrush x:Key = "bg" Color = "Yellow" /> 
«/Window. Resources > 
< WrapPanel > 
< Button Background = "{StaticResource bg]"» A first button </Button > 
< Button Background = "(StaticResource bg}" > A second button </Button > 
< TextBox x:Name = "txt"» I am a TextBox </TextBox > 
< TextBlock Text = "(Binding ElementName = txt, Path = Text]" ></TextBlock > 
«/WrapPanel > 
«/ Window» 


运行 这 段 代 码 ,在 TextBox fij A " This is a DataBinding example". Jil] TextBlock 中 的 
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内 容 也 跟着 改变 ,运行 效果 如 图 1. 11 所 示 。 








TFT [EET] 


[A first button A second button] This is a DataBinding example 
is is a DataBinding example 


>a 


a- MainWindow. 


[a Fist button [A second button] 

















Æ 1.10 Button 绑 定 资源 1.11 TextBox 5 TextBlock 的 数据 绑 定 


WPF 的 可 视 化 系统 集成 了 2D 矢量 图 .光栅 图 片 ,文本 音频、 视频 \ 动 画 和 3D 图形。 
所 有 这 些 特 性 都 集中 在 一 个 引擎 中 ,该 引擎 构建 在 DirectX 之 上 ,这 样 可 以 通过 显卡 硬件 提 


升 软件 的 性 能 。 

2. 绘制 2D 图 形 

通过 使 用 这 种 集成 机 制 ,绘制 2D 图 形 。 设 计 方案 是 : 在 最 外 层 使 用 < DockPanel > 布 
局 ,在 该 布局 中 加 入 < Rectangle >, 并 使 用 < VisualBrush > 对 象 让 其 重复 显示 的 方式 来 填 


充 ,Viewport 和 TileMode 两 个 属性 实现 内 容重 复 多 次 ,代码 如 下 。 


< Window x:Class = "Button. 0.MainWindow" 
xmlns = "http: //schemas. microsoft. com/winfx/2006/xaml/presentation" 


xmlns:x = "http: //schemas. microsoft. con/winfx/2006/xaml" 
Title = "MainWindow" Height = "350" Width = "525"> 
« Window. Resources > 
< SolidColorBrush x:Key = "bg" Color = "Yellow" /> 
«/ Window. Resources > 
< DockPanel > 
< WrapPanel x:Name = "wp" DockPanel. Dock = "Top" 
< Button Background = " (StaticResource bg}"> A first button «/Button» 
< Button Background = "(StaticResource bg}"> A second button </Button > 
< TextBox x:Name = "txt"» I am a text box </TextBox> 
< TextBlock Text = "(Binding ElementName = txt, Path = Text}"></TextBlock > 


«/WrapPanel > 
« Rectangle Margin- "5" > 
< Rectangle. Fill > 
< VisualBrush Visual = " {Binding ElementName = wp}" 
Viewport = "0,0,.5,.2" 
TileMode = "Tile" > 
</VisualBrush> 
</Rectangle. Fill > 
</Rectangle> 
«/DockPanel > 
</Window> 


运行 这 段 代 码 ,编辑 文本 框 中 的 内 容 为 “控件 组 建 2D 图 形 ”, 和 矩形 框 中 的 内 容 也 随 之 改 


变 。 和 运行 效果 如 图 1. 12 所 示 。 


3. 绘制 3D 图 形 
下 面 绘制 3D 图 形 。 首 先 创 建 3D 场景 , 需 从 以 下 5 个 方面 进行 设计 : 模型 (形状 )、 
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图 1.12 控件 组 建 2D 图 形 


材质 (贴图 到 模型 )、 相 机 (观看 位 置 )、 光 源 ( 照 亮 目标 ) 可视化 区 域 (呈现 场景 的 区 域 )。 
此 处 的 材质 用 VisualBrush, 更 为 详细 的 内 容 将 在 后 续 章 节 中 进行 详 述 ,实现 3D 图 形 的 代 
码 如 下 。 


<Window x:Class = "Button. 0.MainWindow" 
xmlns = "http: //schenas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x = "http: //schemas. microsoft. con/winfx/2006/xaml" 
Title = "MainWindow" Height = "350" Width = "525"> 
« Window. Resources > 
< SolidColorBrush x:Key = "bg" Color = "Yellow" /> 
«/ Window. Resources > 
< DockPanel > 
< WrapPanel x:Name = "wp" DockPanel. Dock = "Top" 
< Button Background = " (StaticResource bg}"> A first button «/Button» 
< Button Background = " (StaticResource bg}" > A second button </Button > 
< TextBox x:Name = "txt"» I am a text box «/TextBox > 
< TextBlock Text = "(Binding ElementName = txt, Path = Text] "» «/TextBlock > 
«/WrapPanel > 
< Viewport3D» 








< Viewport3D. Camera > 
< PerspectiveCamera 
LookDirection-"-.7,- .8,- 1" 
Position = "3.8,4,4" 
FieldOfView = "17" 
UpDirection = "0,1,0"» 
«/PerspectiveCamera > 
«/Niewport3D. Camera > 
< ModelVisual3D» 
< ModelVisual3D. Content > 
< Model3DGroup> 
< PointLight 
Position= "3.8,4,4" 
Color = "White" 
Range= "7" 
ConstantAttenuation = "1.0 "/» 
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< GeonetryModel3D > 
< GeonetryModel3D. Geometry > 
< MeshGeometry3D 
TextureCoordinates = "0,0 1,00, -11,-10,01,00,-10,0" 
Ponitions  "0,0,0 1,0,0 0,1,0 1,1,00,1, -13,1, -11,1,—- 11,0, — 1" 
TriangleIndices = "0,1,2 3,2,1 4,2,3 5,4,3 6,3,1 7,6 1"/» 
«/GeonetryModel3D. Geometry > 
< GeonetryModel3D. Material > 
< DiffuseMaterial > 
< DiffuseMaterial. Brush> 
< VisualBrush 
Viewport = "0,0,.5,.25" 
TileMode = "Tile" 
Visual = "(Binding ElementName = wp]" /» 
«/DiffuseMaterial.Brush» 
«/DiffuseMaterial» 
«/GeonetryModel3D. Material > 
</GeometryModel3D> 
</Model3DGroup > 
</ModelVisual3D. Content > 
</ModelVisual3D> 
</Viewport3D> 
</DockPanel > 
</Window> 


运行 这 段 代码 ,编辑 文本 框 中 的 内 容 为 “这 是 一 个 3D 模型 ", 显 示 效 果 如 图 1. 13 所 示 。 


Fe | 


这 是 一 个 30 模 型 | 这 是 “人 30 模型 



































图 1.13 控件 作 材质 组 建 3D 模型 
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4. 动画 

到 目前 为 止 , 所 有 的 内 容 都 是 静止 的 。WPF 支持 动画 ,动画 是 根据 时 间 来 调整 属性 值 
的 。 再 加 入 旋转 变换 可 让 3D 模型 动 起 来 。 在 3D 模型 代码 的 基础 上 ,加 入 旋转 变换 功能 ， 
代码 如 下 ,省 略 与 绘制 3D 模型 相同 的 代码 。 


<! -- 略 --> 
< GeometryMode13D > 
< GeonetryModel3D. Transform > 
< RotateTransform3D 
CenterX = ".5" 
CenterY = ".5" 
CenterZ =" - .5"> 
< RotateTransform3D. Rotation > 
< hxishngleRotation3D 
x:Name = "rotation" 
Axis = "0,1,0" 
Angle = "0"/> 
</RotateTransform3D. Rotation > 
</RotateTransform3D > 
«/GeonetryModel3D. Transform > 
<! -- 保留 Window 代码 部 分 --> 


开始 定义 自己 的 动画 ,引入 < DoubleAnimation >, 加 入 新 的 功能 : 在 3 秒 内 ,完成 一 次 
从 一 30" 角 到 30" 角 的 旋转 ,重复 该 动作 ,新 增 功能 代码 如 下 ,省 略 与 绘制 3D 图 形 相同 的 
代码 。 


二 一 此 -=> 
< Window. Triggers > 
< EventTrigger RoutedEvent = "FrameworkElement. Loaded"> 
< EventTrigger. Actions > 
< BeginStoryboard > 
< Storyboard> 
< DoubleAnimation 
From = " - 30" 
To - "30" 
Storyboard. TargetName - "rotation" 
Storyboard. TargetProperty - "Angle" 
AutoReverse = "True" 
Duration = "0:0:3" 
RepeatBehavior = "Forever" /> 
</Storyboard > 
</BeginStoryboard > 
</EventTrigger. Actions > 
</EventTrigger > 
</Window. Triggers > 


<! -- 保留 Window 代码 部 分 --> 

运行 上 述 代码 ,动画 效果 如 图 1. 14 所 示 。 

5. 设置 样式 

使 用 样式 可 以 把 一 组 属性 应 用 到 一 个 或 多 个 控件 上 ,实现 一 致 的 主题 风格 。 
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图 1.14 3D 场景 中 的 动画 


定义 样式 ,设计 方案 : 把 背景 设置 移入 样式 中 ,代替 上 述 代码 中 每 个 按钮 指向 的 资源 ， 
将 样式 的 键 指向 Button 类 型 , 则 样式 可 用 于 窗口 中 所 有 的 按钮 。 设 置 样式 实现 的 功能 代码 


如 下 。 
-= 


< Window. Resources > 
< SolidColorBrush x:Key = "bg" Color = "Yellow" /> 
< Style x:Key = "(x:Type Button)" TargetType = "(x:Type Button} "> 
< Setter Property = "Background" Value = "(StaticResource bg }" /> 
< Setter Property = "Template" 
< Setter. Value? 
< ControlTenplate TargetType = "(x:Type Button)"» 
«Grid» 
« Ellipse StrokeThickness - "4" » 
< Ellipse. Stroke? 
< LinearGradientBrush> 
< GradientStop Offset = "0" Color = "White" /> 
< GradientStop Offset = "1" Color = "Green" /> 
</LinearGradientBrush> 
«/Ellipse. Stroke > 
< Ellipse.Fill» 
< LinearGradientBrush? 
< GradientStop Offset = "0" Colo: 
< GradientStop Offset = "1" Color = "white" /> 
«/LinearGradientBrush» 
«/Ellipse.Fill» 
</Ellipse> 
< ContentPresenter 
Margin= "10" 
HorizontalAlignment = "Center" 
VerticalAlignment = "Center" /» 
«/Grid» 
«/ControlTemplate > 
«/Setter. Value» 
</Setter > 


"silver"/> 
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</Style> 
</Window. Resources » 


<! 一 保留 Window 代码 部 分 -> 


运行 设置 样式 功能 代码 ,显示 效果 如 图 1. 15 所 示 。 两 个 按钮 的 外 观 呈 椭圆 状 ,椭圆 线 
框 运用 了 从 白 到 绿 的 渐变 色 。 





























图 1.15 样式 实现 椭圆 按钮 


1.4 WPF 体系 结构 


WPF 是 多 层 的 体系 结构 。 在 顶层 ,应 用 程序 和 一 个 完全 由 托管 的 C# 代 码 编 写 的 一 组 
高 层 服务 进行 交互 。 在 底层 执行 将 . NET 对 象 转换 为 DirectX 任务 。 而 这 任务 是 在 后 台 
一 个 名 为 Milcore. dll 的 低级 的 非 托 管 组 件 完 成 的 。Milcore. dll 是 以 非 托管 代码 方式 实 
现 的 。 


1.4.1 WPF 运行 机 制 


WPF 的 核心 是 一 个 与 分 辩 率 无 关 的 基于 向 量 的 呈现 引擎 ,可 以 充分 利用 现代 图 形 设备 
的 优势 ,提高 程序 开发 的 效率 。WPF 和 公共 语言 运行 环境 (Common Language Runtime. 
CLR) 的 完全 集成 ,确保 CLR 提供 的 类 型 安全 、 跨 平台 等 特性 。WPF 运行 机 制 如 图 1. 16 所 
示 , 它 包含 WPF 的 主要 组 件 。 图 中 的 黄色 部 分 (PresentationFramework、PresentationCore 
和 Milcore) 是 WPF 的 组 件 部 分 。 在 这 些 组 件 中 ,Milcore 是 以 非 托 管 代 码 编写 的 ,是 WPF 
隐藏 于 CLR 之 下 的 核心 驱动 组 件 , 目 的 是 与 DirectX 的 紧密 集成 ,在 实际 应 用 程序 开发 中 


14 wpr 编程 基础 





不 太 可 能 访问 到 ,这 里 不 再 进一步 介绍 。 

由 WPF iz £7 BL ti] nT An. WPF 中 的 所 有 显示 都 是 通过 
DirectX 引擎 完成 的 ,还 要 求 对 内 存 和 执行 进行 精确 控制 ,实现 高 
效 硬件 管理 及 软件 呈现 。WPF 运行 在 CLR 之 上 的 ,以 托管 代码 Irene 
的 方式 公开 应 用 程序 编程 接口 (Application Programming |. 0 0 
Interface, API), 并 提供 自身 的 程序 模型 和 类 库 | Common Language Runtime 
(PresentationFramework 和 PresentationCore) 。 


WPF 体系 结构 中 一 个 重要 原理 就 是 基于 属性 , WPF 提供 ifs 


的 类 库 、 操 作 方 式 等 都 尽 可 能 地 使 用 属性 ,而 不 是 方法 或 事件 。 
因为 属性 是 声明 性 的 ,比方 法 和 事件 更 加 容易 指定 对 象 的 意图 [prex | 
(这 在 XAML 中 相当 重要 ), 所 以 属性 系统 是 WPF 体系 结构 中 
一 个 重要 的 组 成 部 分 。 在 WPF 属性 系统 中 ,属性 可 以 被 继承 
和 监视 , 当 属 性 被 更 改 时 ,属性 联系 的 双方 都 被 通知 。 由 于 被 
继承 ,因此 子 元 素 可 以 感受 到 父 元 素 属性 的 变化 ,例如 , 父 窗 体 
的 窗 体 大 小 属性 被 更 改 时 ,会 自动 通知 到 子 窗 体 , 并 同步 刷新 界面 。WPF 属性 系统 的 根本 
是 System. Windows. DependencyObject 类 型 , 它 是 WPF 属性 系统 的 基 类 。 

在 WPF 中 ,System. Windows. Media. Visual 类 型 提供 界面 元 素 的 显示 支持 , 它 用 于 生 
成 一 个 可 视 化 树 , 树 中 每 个 元 素 都 包含 特定 的 绘制 和 实现 能 力 , 从 而 将 需要 的 数据 显示 到 界 
面 。 另 外 ,Visual 类 还 将 托管 的 WPF 组 件 和 非 托管 的 Milcore 组 件 链接 到 一 起 ,通过 在 屏 
幕 上 定义 一 个 矩形 显示 区 域 来 提供 显示 框架 ,从 而 将 可 视 化 树 ( 可 视 化 树 在 本 节 稍 后 部 分 介 
绍 ) 中 各 元 素 呈 现 到 屏幕 上 。 


1.4.2 WPF 类 层次 结构 


WPF 中 大 部 分 类 都 是 从 UIElement、FrameworkElement、ContentElement、Framework- 
ContentElement 4 个 类 派生 而 来 的 ,这 4 个 类 称 为 基 元 素 类 。 其 中 ,UIElement 是 主要 类 ， 
它 是 从 Visual 类 派生 而 来 的 ,适用 于 支持 大 型 数据 模型 的 元 素 ,这 些 元 素 用 于 矩形 屏幕 区 
域 的 区 域内 呈现 和 布局 ,在 该 区 域内 ,使 用 内 容 模型 可 以 让 不 同 的 元 素 进 行 组 合 。 

在 WPF 中 ,改变 了 传统 Windows 应 用 程序 窗 体 中 相对 位 置 计算 的 布局 模式 ,在 WPF 
中 的 布局 就 像 网 页 上 元 素 的 布局 ,显得 更 加 灵活 。 图 1. 17 为 WPF 类 层次 结构 。 

在 此 ,对 WPF 类 层次 结构 中 的 类 做 简要 说 明 。 

(1) System. Threading. DispatcherObject 类 ,继承 此 类 ,用 户 界面 中 的 每 个 元 素 都 可 以 
检查 代码 是 否 在 正确 的 线程 上 运行 。 

(2) System. Windows. DependencyObject 类 ,提供 对 依赖 属性 和 附加 属性 的 支持 。 

(3) System. Windows. Media. Visual 类 ,Visual 实际 上 是 WPF 组 合 系统 的 入 口 点 。 
Visual 是 托管 API 和 非 托管 Milcore 这 两 个 子 系统 之 间 的 连接 点 。 每 个 元 素 本 质 都 是 一 个 
Visual 对 象 。 

(4) System. Windows. UIElement 类 ,提供 WPF 本 质 特征 的 支持 ,如 布局 .输入 、 焦 点 
及 事件 。 

(5) System. Windows. FrameworkElement 类 ,提供 数据 绑 定 动画 及 样式 的 支持 。 




















1.16 WPF 运行 机 制 
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DispatcherObject 
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Visual 
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r— ContentControl 
FrameworkElement Control H 
—  ItemsControl 
Panel 
图 1.17 WPF 类 层次 结构 


(6) System. Windows. Shapes. Shape 类 ,基本 形状 类 继承 于 此 类 。 

(7) System. Windows. Controls. Control 类 ,为 字体 、 前 背景 色 及 模板 提供 支持 。 

(8) System. Windows. Controls. ContentControl 类 ,所 有 具有 单一 内 容 类 控件 的 基 类 。 
(9) System. Windows. Controls. ItemsControl 类 ,所 有 显示 选项 集合 控件 的 基 类 。 
(10) System. Windows. Controls. Panel 类 ,所 有 布局 窗口 的 基 类 。 


1.4.3 WPF 的 可 视 化 树 与 逻辑 树 


当 人 们 看 到 一 些 设计 风格 新 颖 的 网 站 时 .可 以 借助 浏览 器 自 带 的 Inspector 工具 或 插件 
方便 地 浏览 网 站 布局 结构 及 逻辑 。 如 果 是 WPF 开发 的 应 用 程序 ,不 仅 可 以 获得 页 面 布局 
结构 ,还 可 以 使 用 WPF Inspector 工具 来 了 解 应 用 程序 的 架构 方式 。 下 面 来 介绍 如 何 使 用 
WPF Inspector 查看 WPF 中 的 可 视 化 树 与 逻辑 树 。 

在 WPF 应 用 程序 运行 后 ,再 启动 WPF Inspector, 如 图 1. 18 所 示 。 
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图 1.18 WPF Inspector 启动 界面 
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在 此 处 运行 1. 3 节 设 置 样式 中 的 “样式 实现 椭圆 按钮 程序 ,再 启动 WPF Inspector, 单 
i Attach 按钮 ,截取 Visual Tree, 如 图 1. 19 所 示 。 选 择 Logic Tree 选项 卡 ,得 到 的 逻辑 树 


如 图 1. 20 所 示 。 
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在 该 例 的 UI 中 ,窗口 逻辑 树 的 根 结 点 Window 下 面 有 一 个 子 结 点 DockPanel。 而 
DockPanel 有 两 个 子 结 点 WrapPanel 和 Viewport3D。WrapPanel 下 有 4 个 子 结 点 : 两 个 
Button, —^* TextBox 和 一 个 TextBlock。 逻 辑 树 始终 存在 于 WPF 的 UI 中 ,不 管 UI 是 用 
XAML 编写 还 是 用 代码 编写 。WPF 的 每 个 方面 (属性 、 事 件 、 资 源 等 ) 都 是 依赖 于 人 逻辑 
树 的 。 

可 视 化 树 是 多 辑 树 的 一 种 扩展 。 逻 辑 树 的 每 个 结 点 都 被 分 解 为 它们 的 核心 可 视 化 组 
件 。 偿 辑 树 的 结 点 对 用 户 而 言 基本 是 一 个 黑 盒 。 而 可 视 化 树 不 同 , 它 暴露 了 可 视 化 的 实现 
细节 。 可 视 化 树 比 逻辑 树 全 面 , 显 示 了 每 一 层 UI 对 象 , 可 以 对 每 一 个 可 视 UI 对 象 进行 控制 ， 
也 可 直接 修改 布局 容器 ,需要 显示 特殊 效果 时 ,可 以 调用 System. Windows. Logical TreeHelper 
这 个 类 来 实现 。 


1.5 WPF 与 UWP 


微软 于 2006 年 发 布 WPF ,截至 2016 年 初 .微软 在 我 国 已 陆续 推出 了 UWP(Universal 
Windows Platform) 应 用 ,不 过 初始 版 本 很 简陋 。 那 么 微软 的 UWP 与 WPF 两 者 之 间 又 有 
什么 关联 呢 ? 

UWP 即 Windows 10 中 的 Universal Windows Platform 简称 , 即 Windows 通用 应 用 
平台 ,在 Windows 10 Mobile/Surface( Windows 平板 电脑 )/PC/Xbox/ HoloLens 等 平台 
运行 ,UWP 不 同 于 传统 PC 上 的 EXE 应 用 , 它 与 只 适用 于 手机 端的 APP 有 着 本 质 的 区 别 。 
由 它 的 名 字 就 可 以 知道 , 它 并 不 是 为 某 一 个 终端 而 设计 的 ,而 是 可 以 在 所 有 Windows 10 it 
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备 上 运行 的 。 下 面 将 两 者 放 在 一 起 简要 讨论 。 

(1) WPF 已 经 是 比较 成 熟 的 技术 ,而 UWP 支持 多 种 设备 。 

(2) WPF 所 有 的 操作 都 不 依赖 于 GDI(Graphics Device Interface, 图 形 设备 界面 ) 和 
GDI 十 ,而 是 间接 依赖 于 强大 的 DirectX, 这 就 意味 着 通过 WPF 可 以 做 出 以 前 用 WinForm 
无 法 想象 的 视觉 效果 ,包括 3D 效果 的 应 用 程序 。 而 UWP 作为 Windows 通用 应 用 平台 , 随 
着 其 应 用 产品 的 开发 ,也 将 慢 慢 凸显 出 其 优势 。 

(3) WPF 彻底 把 程序 架构 .业务 逻辑 和 用 户 界面 (UD) 分 离开 。WPF 引擎 把 XAML 描 
述 的 UI 元 素 解释 为 相应 的 . NET 对 象 ,从 而 在 应 用 程序 创建 相应 的 控件 ,UI 人 员 和 程序 人 
员 均 可 对 此 控件 进行 编辑 加 载 ,实现 用 户 界面 和 程序 架构 的 彻底 分 离 , 而 微软 的 WinForm 
做 不 到 。WPF 是 成 熟 的 技术 ,是 UWP 开发 的 基础 。 


1.6 小 结 
本 章 从 Windows Form 托管 对 象 模型 出 发 ,剖析 了 WPF 的 编程 机 制 ,了 解 了 XAML 


编程 模型 与 XML 的 关系 。 通 过 逐 层 深 入 的 Button 案例 ,认识 了 WPF 平台 特性 ,阐述 了 
WPF 的 运行 机 制 及 类 层次 结构 ,从 而 厘清 了 WPF 的 体系 结构 。 


习题 与 实验 1 
1. 简 述 WPF 的 新 特性 及 体系 结构 。 


2. 分 别 用 HTML 和 XAML 编写 代码 ,在 IE 中 输出 “This is my first WPF class!”, 页 
面 效果 如 图 1. 21 与 图 1. 22 所 示 。 
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1.213 HTML 效果 
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图 1.22 XAML 效果 


3. 设计 2D 和 3D 页 面 ,效果 如 图 1. 23 和 图 1. 24 所 示 ,设计 3D 页 面 效 果 时 ,适当 调整 
3D 旋转 角度 。 
4. 下 载 并 安装 WPF Inspector 工具 ,观察 第 3 题 的 可 视 化 树 与 逻辑 树 。 




















图 1.24 3D 效 果 图 
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XAML(eXtensible Application Markup Language, 可 扩展 应 用 程序 标记 语言 ) 是 微软 
公司 创建 的 一 种 新 的 描述 性 语言 ,用 于 搭建 应 用 程序 用 户 界面 。XAML 实现 了 用 户 界面 与 
业务 逻辑 完全 分 离 。 

在 第 1 章 中 ,对 照 了 HTML 5j XAML 两 者 的 异同 点 。 发 现 尽 管 XAML 在 元 素 的 声 
Hj] ,程序 样式 的 设置 等 语法 结构 上 和 HTML 上 有 相似 之 处 ,但 XAML 有 别 于 HTML 最 显 
著 的 特征 是 xmlns 指令 和 标记 扩展 。 其 中 ,xmlns 指令 需要 在 标记 中 关联 名 称 空间 。 

XAML 并 不 是 HTML ,而 是 基于 XML 的 ,是 WPF 的 外 在 表现 形式 。 而 HTML 只 是 
一 种 标记 语言 ,仅仅 是 用 来 为 浏览 器 呈现 页 面 内 容 。XAML 可 以 用 来 呈现 信息 和 请 求 用 户 
输入 等 基本 的 功能 , 它 还 支持 动画 和 3D 等 高 级 特性 。 

XAML 是 可 扩展 的 ,开发 人 员 可 以 创建 自 定义 的 控件 、 元 素 和 函数 来 扩展 XAML, M 
于 XAML 各 元 素 在 本 质 上 就 是 WPF 类 的 映射 ,因此 开发 人 员 可 以 很 轻松 地 使 用 面向 对 象 
的 技术 对 XAML 元 素 进行 扩展 。 也 就 是 说 ,可 以 开发 一 些 自 定义 控件 和 组 合 元 素 , 用 户 界 
面 设 计 人 员 和 开发 人 员 直 接 使 用 即 可 ,软件 真正 做 到 了 可 复 用 性 。 


2.1 XAML 文档 框架 
一 个 简单 的 WPF 应 用 程序 UI 页面. 都 能 由 XAML 编写 出 来 。 下 面 创建 WPF 应 用 程 


序 , 命 名 为 “Button. _1”, 进 入 应 用 程序 启动 页 面 后 ,在 解决 方案 管理 器 中 双击 文件 名 ,打开 
MainWindow. xaml, 系统 自动 生成 的 代码 如 下 。 





< Window x:Class = "Button. 1.MainWindow" 
xmlns = "http: //schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x = "http://schemas. microsoft. com/winfx/2006/xaml" 
Title = "MainWindow" Height = "350" Width = "525"> 
«Grid» 
«/Grid» 
«/ Window 


在 此 首先 了 解 XAML 文件 基本 框架 ,这 个 文档 包含 一 个 顶级 元 素 Window 和 一 个 
Grid 元 素 。Window 代表 整个 窗口 ,Grid 布局 上 可 以 放置 所 需 控 件 。 一 个 XAML 文件 只 
能 有 一 个 顶级 元 素 。 

WPF 中 可 以 当 顶 级 元 素 的 还 有 Page 元 素 和 Application 元 素 。Page 用 于 可 导航 的 应 
用 程序 ; Application 用 于 定义 应 用 程序 的 资源 和 启动 设置 。 

分 析 Window 开始 标签 ,依照 自 上 而 下 的 顺序 , 它 包 含 一 个 类 名 、 两 个 xmlns 指令 关联 
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的 名 称 空间 和 3 个 属性 (Title、Height 和 Width). 


2.1.1 XAML 文档 结构 


TE XAML 文件 基本 框架 上 ,为 应 用 程序 添加 设计 要 求 : 在 Button. 上 放置 一 个 Image 
和 一 个 TextBox。 在 < Grid > 与 </Grid > 之 间 ,添加 XAML 代码 如 下 。 


<! -一 保留 Window 代码 部 分 --> 
<Grid> 
<Button> 
< Button. Content > 
< StackPanel Orientation = "Vertical"> 
< Image Source = "happyface. jpg" Width- "150" Height = "150"></Image> 
< TextBox Text = "Smile" VerticalAlignment = "Center" HorizontalAlignment = 
"Center" 
«/TextBox > 
«/StackPanel » 
«/Button. Content » 
«/Button» 
«/Grid» 
</Window> 


运行 上 述 代 码 , 显 示 效 果 如 图 2. 1 所 示 。 分 析 代 码 的 逻辑 结构 可 知 ,Window 为 顶级 元 
素 , 在 Grid 布局 下 有 一 个 Button; 在 Button 下 使 用 StackPanel 布局 后 ,又 加 入 了 Image 和 
TextBox。 将 本 案例 的 XAML 文件 结构 用 图 2. 2 表示 。 

































































Window 
Grid 
31 MainWindow [IIT] 
Button 
Stackpanel 
Image TextBox 
图 2.1 XAML 笑脸 界面 图 2.2 XAML 文档 树 形 结构 


应 用 程序 的 UI 在 用 户 看 来 是 一 个 平面 结构 ,与 传统 设计 理念 不 同 的 是 ,XAML 是 树 形 
逻辑 结构 。 当 然 实 现 Button. 上 放置 Image 和 TextBox 的 UI 有 很 多 方式 ,但 是 不 管 哪 种 方 
式 ,文档 框架 都 是 树 形 结构 。 


2.1.2 基础 语法 


XAML 中 最 基本 的 语法 元 素 与 XML 类 似 , 下 面 回顾 一 下 XML 中 的 标签 、 属 性 和 内 容 
的 语法 。 
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1. 标签 

标签 通常 是 以 <> 开 始 ,以 </> 结 束 的 ,一 个 标签 的 声明 通常 表示 一 个 对 象 。 如 < Window > 
</Window >、< Grid ></Grid > 分 别 定义 了 一 个 窗 体 对 象 及 一 个 Grid Ee ,标签 定义 有 以 
下 两 种 常用 写法 。 

CD 非 自 闭合 标签 : 如 < Window ></Window >,< Grid ></Grid >, 标 签 要 成 对 出 现 。 

(2) 自 闭合 标签 : 如 < Window />,< Grid/>、< Button/>。 

这 种 自 闭合 标签 用 于 无 内 容 情况 下 ,可 以 让 代码 看 上 去 更 简洁 ,当然 ,正常 情况 下 
Window 及 Grid 都 是 有 内 容 的 。 

2. 属性 

属性 通常 以 键 值 对 形式 出 现 ,形式 如 下 。 


Rttribute = Value 


例如 ,< Window ></Window > 标签 中 的 “Title 王 "MainWindow"”Height 一 "350" 
Width 二 "525"”, 等 号 左边 表示 Window 标签 的 属性 ,等 号 右边 表示 该 属性 的 值 。 

3. 内 容 

一 组 标签 对 之 间 夹 杂 的 文本 或 其 他 标签 都 称 为 这 个 标签 之 间 的 内 容 。 此 处 Window 标 
签 的 内 容 就 是 一 对 < Grid > </Grid > 标签 。 


2.2 XAML 中 的 属性 


本 节 继 续 使 用 Button._1 代码 ,根据 需要 还 会 不 断 丰 富 其 功能 ,以 便 配合 讲解 XAML 
中 的 各 属性 。 


2.2.1 简单 属性 


XAML 是 声明 性 语言 ,XAML 编译 器 给 每 个 标签 创建 一 个 与 标签 对 应 的 对 象 , 再 对 其 
属性 初始 化 。 所 以 ,每 个 标签 是 要 先 声明 对 象 , 再 为 对 象 赋 初 值 。 赋 值 方法 有 两 种 : 一 种 是 
XAML 中 的 字符 串 简单 赋值 ,另外 一 种 是 在 后 台 CS 代码 中 ,使 用 属性 元 素 进行 复杂 赋值 。 

1. 字符 串 简单 赋值 

XAML 使 用 标签 定义 UI 元 素 , 每 一 个 标签 对 应 . NET Framework 类 库 的 一 个 控件 类 。 
通过 设置 标签 的 Attribute( 属 性 ) ,实现 标签 对 应 的 控件 对 象 Property( 属 性 ) 赋 值 。 

«Grid» 

< Rectangle x:Name = "rectangle" Fill- "Blue" Margin = "344,112,56, 125"></Rectangle > 

«/Grid» 

2. 属性 元 素 复杂 赋值 

在 CS 代码 中 ,创建 对 象 ,并 设置 它们 的 属性 。 代 码 如 下 。 

public partial class MainWindow : Window 

{ 

public MainWindow() 


{ 
InitializeComponent(); 
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SolidColorBrush scb = new SolidColorBrush(); 
Scb. Color = Colors. Yellow; 
this. rectangle. Fill = scb; 


} 


两 种 赋值 方法 相对 照 ,这 里 需 解 释 Fill 属性 的 用 法 。 因 为 Fill 类 型 是 Brush, 但 是 
Brush 是 一 个 抽象 类 ,由 于 抽象 类 不 能 实例 化 ,所 以 只 能 用 抽象 类 的 子 类 实例 赋值 。Brush 
的 派生 类 简要 说 明 如 下 。 

* SolidColorBrush: 使 用 纯 Color 绘制 区 域 ; 

。 LinearGradientBrush: 使 用 线性 渐变 绘制 区 域 ; 

。 RadialGradientBrush: 使 用 径 向 渐变 绘制 区 域 ; 

* ImageBrush: 使 用 图 像 ( 由 ImageSource 对 象 表示 ) 绘 制 区域 ; 

* DrawingBrush: 使 用 Drawing 绘制 区 域 。 绘 图 可 能 包含 向 量 和 位 图 对 象 ; 

* VisualBrush: 使 用 Visual 对 象 绘制 区 域 , 使 用 VisualBrush 可 以 将 内 容 从 应 用 程序 

的 一 个 部 分 复制 到 另 一 个 区 域 , 这 在 创建 反射 效果 和 放大 局 部 屏幕 时 会 非常 有 用 。 


2.2.2 复杂 属性 


使 用 Button._1, 加 入 新 的 设计 需求 : Grid 的 背景 使 用 渐变 色 ,渐变 方案 是 : 由 红色 到 
黄色 ,再 由 黄色 到 绿色 。 
要 实现 该 功能 就 需要 对 Grid. Background 中 的 LinearGradientBrush 进行 设置 ,代码 
如 下 。 
<! -- 保留 Window 代码 部 分 --> 
<Grid> 
< Grid. Background > 
<LinearGradientBrush EndPoint = "0.5,1" StartPoint = "0.5,0"> 
< GradientStop Color = "Red" Offset = "0" /> 
< GradientStop Color = "Yellow" Offset = "0.6" /> 
< GradientStop Color = "Green" Offset = "1" /> 
«/LinearGradientBrush» 
«/Grid. Background » 
<! -- {RM Button. 1 后 续 代 码 部 分 --> 
运行 上 述 代 码 ,显示 效果 如 图 2. 3 所 示 。 
代码 中 的 Grid. Background 便 是 复杂 属性 。 下 
面 介绍 程序 中 用 到 的 属性 。 
在 上 节 的 学 习 中 ,已 知 LinearGradientBrush 
的 功能 是 线性 渐变 笔 刷 填 充 线 性 渐变 颜色 到 当 
前 区 域 , 故 可 搭配 两 种 或 两 种 以 上 的 颜色 。 它 
的 重要 属性 有 GradientStop( 倾 斜 点 )、Color( 渐 
变 颜 色 )、Offset ( 偏 移 量 )、StartPoint (起 点 坐 
标 )、EndPoint( 终 点 坐标 )。 
LinearGradientBrush 的 渐变 色 是 由 多 个 




















图 2.3 Grid 渐变 效果 
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GradientStop 组 成 的 ,其 中 Color 和 Offset 分 别 表示 渐变 色 值 和 颜色 起 始 位 置 。Offset 宽 
度 是 整个 绘制 区 域 , 取 值 范 围 为 0 一 1.0。 


2.2.3 附加 属性 


在 上 述 代码 的 基础 上 ,加 入 新 的 设计 需求 : Grid 布局 中 ,加 入 一 个 紫色 和 矩形。 显示 效果 
如 图 2.4 所 示 。 























2.4 加 入 紫色 矩形 后 呈现 效果 


由 图 2.4 可 知 ,需要 为 对 Grid 新 增加 1 列 ,对 < Grid. ColumnDefinitions > 属性 设置 代 
码 如 下 。 
<! -- 保留 上 述 代 码 部 分 --> 
«/Grid. Background > 
< Grid. ColumnDefinitions > 
< ColumnDefinition ></ColumnDefinition> 
< ColumnDefinition ></ColumnDefinition> 
«/Grid. ColumnDefinitions > 


要 将 < Rectangle > 置 于 Grid 的 第 1 列 ( 在 Grid 中 的 行 与 列 的 起 始 值 都 是 从 0 开始 ) , 紫 
f&CFill— " Violet") ,代码 如 下 。 

<! -- 保留 上 述 代码 部 分 --> 

</Button > 
< Rectangle x:Name = "Rec" Grid. Column = "1" Fill = "Violet" Margin = "70" /> </Grid> 
</Window > 

查阅 上 述 两 段 代码 中 用 到 的 属性 ,< Grid. ColumnDefinitions > 是 复杂 属性 . “Grid. 
Column 王 "1"” 位 于 < Rectangle > 内 部 ,这 就 是 附加 属性 。 

这 时 读者 可 能 有 疑问 ,两 个 属性 都 是 “Grid.” 这 种 形式 ,为 什么 称谓 不 同 ,因为 
ColumnDefinitions 这 一 属性 隶属 于 Grid, 它 完全 可 以 视 为 Grid 的 子 标签 , 而 “Grid. Column = 
"1"” 是 在 < Rectangle > 内 部 ,用 来 设置 Rectangle 标签 的 。 它 并 非 真 正 的 属性 ,被 转 为 调用 
Get. SetColumn() 方 法 来 实现 。 再 进一步 观察 ,会 发 现 附加 属性 用 在 控件 布局 里 面 。 


2.2.4 处 理 特殊 字符 与 空白 
在 XAML 中 ,可 以 让 一 些 特殊 字符 作为 元 素 的 内 容 出 现 , 例 如 ,上 述 示例 中 的 Smile 要 
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变 成 < Smile > 显示 ,需要 修改 TextBox 标签 中 的 Text 二 "&lt;smile&.gt;"。 
表 2.1 列 出 了 常用 的 特殊 字符 ,并 给 出 它 在 XAML 标签 中 的 处 理 方式 。 


表 2.1 XAML 中 特殊 字符 处 理 方式 





特殊 字符 处 理 方式 特殊 字符 处 理 方式 
二 (小 于 号 ) &lt; & (与 字符 ) &amp; 
二 (大 于 号 ) &;gt; "(英文 引号 ) &auot; 




















TE XAML 中 处 理 特殊 字符 并 不 难 ,但 还 存在 一 个 关键 问题 一 一 空白 的 处 理 。 在 默认 情 
况 下 ,XAML 忽略 所 有 的 空白 ,这 就 意味 着 空格 、Tab 键 \ 硬 回 车 、 带 有 多 个 空格 的 长 字符 串 
被 转换 为 单个 空格 。 有 时 放 在 文本 中 的 空格 ,希望 输出 ,例如 ,文本 框 中 输出 带 尖 括 号 及 空 
格 的 字符 ,如 < Smile >, 则 需要 修改 代码 如 下 ,显示 效果 如 图 2.5 所 示 。 


< TextBox Name = "Txt" Text = "&lt; smile &gt;" xml:space = "preserve" /> 











E EA» 


(4^ MainWindow 












2.5 特殊 字符 与 留 白 效 果 


在 保留 空格 的 元 素 (TextBox) 中 使 用 "xml:space 王 "preserve"”,Text 属性 中 的 空格 被 
保留 输出 。 事 实 上 “xml:space 一 "preserve"” 特 性 是 XML 标准 的 一 部 分 。 


2.3 XAML 名 称 空间 


本 节 将 进一步 介绍 XAML 文件 根 标记 中 的 两 个 默认 XAML 名 称 空间 映射 及 其 用 途 ， 
同时 还 介绍 如 何 生成 类 似 的 映射 ,便于 用 在 代码 中 或 单独 的 程序 集中 定义 的 元 素 。 


2.3.1 名 称 空间 的 作用 


开发 语言 会 将 常用 功能 以 类 的 形式 封装 ,开发 人 员 根 据 业 务 需求 ,也 会 封装 符合 自身 业 
务 需求 的 类 ,有 序 组 织 这 些 类 。 这 样 ,一 方面 .便于 开发 人 员 准 确 调用 ; 另 一 方面 ,编译 器 可 
以 有 效 地 识别 具有 相同 命名 的 类 ,就 引入 了 名 称 空 间 。 名 称 空间 是 通过 类 似 树 形 结构 来 组 
织 各 种 类 ,是 一 种 较为 有 效 的 类 名 排列 方式 。 

XAML 和 . NET 其 他 语言 一 样 ,也 是 通过 名 称 空间 有 效 地 组 织 XAML 内 部 的 相关 元 素 
类 ,但 是 XAML 的 名 称 空间 与 . NET 中 的 名 称 空间 不 是 一 对 一 的 映射 关系 ,而 是 一 对 多 映射 。 
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2.3.2 默认 名 称 空间 
在 上 一 节 XAML 文档 结构 中 ,了 解 到 系统 默认 的 两 个 名 称 空间 的 代码 如 下 。 


xnlns = "http://schemas.microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x= "http://schemas. microsoft. com/winfx/2006/xaml" 


XAML 名 称 空间 是 XML 名 称 空 间 概 念 的 扩展 。xmlns 是 XML-Namespace 的 缩写 ， 
看 起 来 类 似 “ 网 址 ”, 但 在 IE 中 无 法 打开 ,所 以 它 并 不 是 网 址 。 它 是 遵循 XAML 解析 器 标准 
的 命名 规则 ,是 声明 程序 集 和 . NET 名 称 空间 的 引用 。 

其 中 ,“xmlns 二 "http://schemas. microsoft. com/winfx/2006/xaml/presentation"” 与 
.NET 的 名 称 空间 中 的 System. Windows 下 的 类 相对 应 ,包含 XAML 基本 的 布局 和 控件 。 

带 x 的 “xmlns: x=" http://schemas. microsoft. com/winfx/2006/xaml"” 对 应 一 些 
XAML 语法 和 编译 相关 的 CLR 名 称 空间 。 

为 了 避免 概念 上 的 混淆 ,在 此 ,对 C# CLR 与 .NET 做 简要 说 明 。 在 人 们 做 开发 时 , 常 
会 使 用 Cs ifi UE. NET 的 核心 开发 语言 ; . NET(. NET Framework) 是 一 个 运行 时 平 
fR; CLR(Common Language Runtime) 是 公共 语言 运行 库 , 与 Java 虚拟 机 一 样 是 一 个 运行 
时 环境 , 它 负责 资源 管理 (内 存 分 配 和 垃圾 收集 等 ) ,确保 应 用 和 底层 操作 系统 之 间 必要 的 分 
离 。 正 是 因为 有 了 CLR, 所 以 . NET 成 为 一 个 跨 语 言 的 集成 开发 平台 。 


2.3.3 名称 空间 中 的 标记 扩展 


标记 扩展 是 XAML 的 重要 特性 , 它 放 在 一 对 花 括 号 (} 中 ,使 用 类 似 对 象 标签 的 方式 来 
精确 解析 。 

现在 增加 新 的 设计 需求 : 矩形 框 的 颜色 为 黄色 。 简 单 的 方法 是 Fill= " Yellow" ,但 是 在 
此 ,用 标记 扩展 来 实现 。 先 设置 窗 体 资源 ,代码 如 下 。 

« Window. Resources > 


< SolidColorBrush x:Key = "bg" Color = "Yellow" /> 
«/Window. Resources > 


再 修改 Rectangle 的 Fill ,代码 如 下 。 
< Rectangle x:Name = "Rec" Grid. Column = "1" Fill- "(StaticResource bg}" Margin = "70" /> 


运行 代码 后 ,得 到 如 图 2. 6 所 示 的 效果 。Fill 使 用 标记 扩展 来 赋值 。 
^N [nr 























图 2.6 名 称 空间 中 的 标记 扩展 
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表 2.2 是 XAML 内 置 XAML 特性 名 称 空间 指令 及 含义 ,并 使 用 标记 扩展 语法 示例 


说 明 。 


XAML 名 称 空 间 指令 


表 2.2 XAML 内 置 XAML 特性 


*$ x 


示 8 





xi; Array 


创建 CLR 数组 


< x: ArrayType— " (x: Type Button) "> 
< Button/> 
< Button/> 

</x:Array > 





x:Class 


定义 的 类 名 


< Window 
x:Class= "MainWindow">*… 
</Window > 





x:ClassModifier 


定义 类 型 的 模式 Public、 


Internal 


< Window** 
xi:Class 一 "MainWindow ">>… 
x:ClassModifier= "Public" ++ 


























</Window > 
< x:Code > 
x:Code XAML PARRE Public void SomeMethodO { } 
</x:Code > 
< Window. Resources > 
x:Key 包含 在 字典 中 的 元 素 键 < SolidColorBrush x:Key 一 "bg"…/> 
</Window. Resources > 
x:Name 指定 元 素 的 编程 名 < Rectangle x:Name 一 "Rec”…/> 
x:Null 创建 一 个 空 值 < TextBox Text 一 "{x:Null) "> 
x:Static 静态 字段 和 属性 值 < Button background 一 "{Static…)"/> 
< ControlTemplate > 
x:Type 提供 CLR 类 型 TargetType 一 "{x:Type Button] " 
X/ControlTemplate > 
为 实例 化 泛 型 类 型 指定 泛 < object x: Class E " namespace. classname" x: 
xi TypeArguments TypeArguments — " ( x: Type typel) [, {x: Type 
型 类 型 的 参数 
type2}, (x: Type type3,...}]"></object> 
x:XData XAML 指令 元 素 主要 用 作 XmlDataProvider 的 子 对 象 或 








XmlDataProvider. XmlSerializer 属性 的 子 对 象 


2.4 类 型 转换 器 


XAML 的 属性 元 素 赋值 形式 为 Attribute 二 Value。 此 处 的 Value 是 一 个 String 类 型 ， 
但 在 后 台 CS 代码 中 ,对 象 的 属性 (Property) 类 型 不 一 定 是 String 类 型 。 为 了 解决 XAML 
与 CS 代码 中 的 数据 类 型 不 统一 ,使 用 TypeConverter 类 。 这 个 类 的 功能 是 : 将 值 类 型 转换 
为 其 他 类 型 ,如 可 以 把 字符 串 转换 成 对 象 。 
现在 又 在 设计 中 新 增 需 求 : 在 CS 中 创建 Teacher 类 ,Teacher 中 有 Name 和 Student 
两 个 属性 ,其 中 Name 类 型 是 String, Student 类 型 是 Teacher; XAML 中 的 Button 按 下 后 ， 
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弹出 一 个 消息 框 ,消息 框 中 的 显示 内 容 为 1 am your sun。 其 中 ,消息 框 调 用 方式 为 
Teacher. Student. Name。 


根据 设计 要 求 ,首先 在 后 台 CS 中 创建 Teacher 类 ,代码 如 下 。 


public class Teacher 


t 
public string Name ( get;set; ) 
public Teacher Student ( get; set; ) 
} 
f£ XAML 中 变更 的 代码 如 下 。 


< Window x:Class = "Button. 1.MainWindow" 
xnlns = "http: //schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x = "http: //schemas. microsoft. com/winfx/2006/xaml" 
xmlns:local- "clr- namespace:Button. 1" 
Title = "MainWindow" Height = "350" Width = "525" 
« Window. Resources > 
< local:Teacher x:Key = "teacher" Student = "I am your sun"/» 
«/ Window. Resources > 
<! -一 保留 Window 代码 部 分 --> 
< Button Name = "BtnMes" Height = "180”Width= "160”Click = "BtnMes Clicked"» 
<! -- 保留 Window 代码 部 分 --> 


</Window > 

因为 Button 上 放 着 图 片 ,双击 Button ,系统 无 法 跳 转 到 Click 事件 。 在 此 ,建议 操作 方 
式 : TESEIE" Click — "BtnMes Clicked"" EA ih 38 Hi An [el 2.7 所 示 的 快捷 菜单 ,选择 “导航 
到 事件 处 理 程序 ”选项 ,编辑 Click 事件 代码 如 下 。 


private void BtnMes Clicked(object sender, RoutedEventArgs e) 
f 
Teacher t = (Teacher)this. FindResource("teacher"); 
MessageBox. Show(t. Student. Name) ; 
} 


运行 代码 , 单 击 , 抛 出 异常 ,报错 "Resource Reference Key Not Found Exception”。 找 
不 到 调用 资源 ,出 错位 置 为 “MessageBox. Show (t. Student. Name)”。 分 析出 错 原因 是 : 
XAML 中 的 属性 值 类 型 无 法 转换 成 CS 中 的 对 象 类 型 。 解 决 问题 的 方案 是 通过 
TypeConverter 派生 用 户 自 定义 类 , 重 载 该 类 的 ConvertFrom 方法 。 该 方法 中 有 一 个 Value, 它 
就 是 在 XAML 中 进行 设置 的 ,再 把 这 个 Value 转换 成 用 户 期 望 的 数据 类 型 。 下 面 创建 一 个 将 
String 转换 成 Teacher 的 用 户 自 定义 类 ,将 这 个 类 命名 为 StringToTeacherTypeConverter， 
CS 代码 如 下 。 


using System. ComponentModel; / / Add new Namespace 
namespace Button. 1 
{ 
public class StringToTeacherTypeConverter:TypeConverter 
{ 
public override object ConvertFrom(ITypeDescriptorContext context, System. Globalization. 
CultureInfo culture, object value) 
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{ 
if (value is string) 
{ 
Teacher t = new Teacher(); 
t. Name = value as string; 
return t; 


) 
return base.ConvertFrom(context, culture, value); 


) 


如 果 现 在 就 运行 代码 ,还 是 会 报错 ,出 错 类 型 和 上 面相 同 。 在 Teacher 类 前 ,编写 代码 
如 下 。 


using System. ComponentModel; / / Add new Namespace 
namespace Button. 1 
{ 
[TypeConverterAttribute(typeof(StringToTeacherTypeConverter))] 
public class Teacher 
{ 
public string Name { get;set; } 
public Teacher Student { get; set; } 


} 
现在 运行 代码 , 单 击 Button ,弹出 消息 框 ,显示 页 面 效果 如 图 2. 8 所 示 。 

















图 2.7 导航 到 事件 处 理 程序 2.8 TypeConverter 实现 


此 处 可 以 把 TypeConverterAttribute 中 的 Attribute 省 去 ,因为 特征 类 在 使 用 时 可 省 略 
Attribute。 


2.5 导入 程序 集 


在 项 目 开发 时 ,一 个 项 目 由 多 个 模块 构成 ,模块 之 间 可 以 相互 调用 。 在 用 Visual Studio 
2010 创建 的 解决 方案 下 ,每 个 项 目 都 可 以 独立 编译 ,独立 编译 的 结果 就 得 到 一 个 程序 集 。 
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常见 的 程序 集 包 括 exe( 可 执行 文件 ) 和 dll( 动 态 链接 库 )。 这 里 说 的 “导入 程序 集 ” 是 指 dll 
类 型 。 程 序 集 要 放 在 合适 的 名 称 空间 下 ,名 称 空间 解决 不 同 模块 类 名 相同 问题 。 

在 XAML 中 导入 程序 集 。 设 用 户 自 定义 的 程序 集 名 为 UserLibrary. dll, 它 有 Comm 
和 Cont 两 个 名 称 空间 ,在 XAML 中 引用 这 两 个 名 称 空 间 的 语法 格式 如 下 。 


xmlns: 映 射 名 = "clr - namespace: 名 称 空间 ;assembly= 程序 集 名 " 
接 下 来 根据 语法 格式 ,在 程序 集 UserLibrary. dll 中 的 两 个 名 称 空间 对 应 的 XAML 引 
用 为 : 


xmlns:comm = "clr 一 namespace:Comm;assembly = UserLibrary" 
xmlns:cont = "clr 一 namespace:Cont;assembly = UserLibrary" 


在 XAML 文档 添加 引用 后 ,就 可 以 使 用 名 称 空间 中 的 类 ,语法 格式 如 下 。 


< 映射 名 :类 名 >…</ 映 射 名 :类 名 > 
< comm: 类 名 ></comm: 类 名 > 
<cont: 类 名 ></cont: 类 名 > 


本 节 的 例子 只 是 简单 引入 ,后 面 会 详细 说 明 。 
2.6 水 结 


本 章 从 XAML 文档 框架 开始 ,让 读者 认识 到 UI 的 平面 结构 对 应 着 XAML 文档 的 树 
形 结构 。XAML 是 可 扩展 的 应 用 程序 声明 式 语言 , 它 是 基于 XML 的 ,所 以 XAML 中 的 标 
签 .属性 .内容 语法 结构 与 XML 有 相似 之 处 。 本 章 案例 从 Button. 上 放置 Image, TextBox 
的 例子 开始 ,通过 分 层 释 加 式 案例 ,逐步 地 讲解 XAML 的 复杂 属性 .附加 属性 .xmlns 指令 
和 名 称 空间 中 的 标记 扩展 ,并 使 用 TypeConverter 类 把 字符 串 转换 成 对 象 。 还 讲解 了 项 目 
开发 时 ,在 XAML 导 和 程序 集 的 语法 。 倘 若 在 学 习 中 ,有 些 内 容 不 懂 , 可 以 跳 过 , 当 遇 到 具 
体 应 用 后 , 回 过 头 来 阅读 ,会 忱 然 大 悟 。 对 XAML 语法 知识 有 所 了 解 以 后 , 便 可 以 用 它 来 创 
建 用 户 界面 了 。 


习题 与 实验 2 


1. 简 述 XAML 中 的 简单 属性 、 复 杂 属 性 和 附加 属性 。 

2. 在 XAML 页 面 定 义 两 个 矩形 ,左边 的 矩形 填充 成 紫色 ,右边 的 矩形 填充 为 渐变 色 ， 
渐变 从 蓝 色 到 紫色 再 到 红色 。 外 部 的 Grid 布局 背景 色 用 米黄 色 (beige) ,页 面 显示 效果 如 
图 2.9 所 示 。 

3. 设计 软件 登录 界面 ,界面 效果 如 图 2. 10 所 示 。 该 登录 界面 设计 要 求 : 界面 中 按钮 背 
景色 (参照 标记 扩展 部 分 ) 绑 定 同 种 颜色 , 当 单 击 “ 登 录 ” 按 钮 时 ,可 以 弹出 “欢迎 登录 ”对 
话 框 。 
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图 2.10 登录 界面 





布局 


WPF 布局 是 通过 面板 (Panel) 对 页 面 元 素 进行 全 面 规划 和 安排 。 简 单 地 说 ,就 是 把 一 
些 控 件 有 条 理 地 摆 放 在 界面 上 合适 的 位 置 。 在 应 用 程序 界面 设计 中 ,合理 的 元 素 布局 至 关 
重要 , 它 可 以 方便 用 户 操作 ,并 用 清晰 的 页 面 迎 辑 呈 现 用 户 信 息 。 如 果 内 置 布局 控件 不 能 满 
足 需要 ,用 户 还 可 以 创建 自 定 义 的 布局 元 素 。 


3.1 布局 原则 


WinForm 的 布局 是 采用 基于 坐标 的 方式 , 当 窗 口内 容 发 生变 化 时 ,里 面 的 控件 不 会 随 
之 动态 调整 ,用 户 体验 不 够 好 。 而 WPF 采用 了 基于 流 的 布局 方式 , 像 Web 开发 模式 。 流 
式 布局 特点 是 : 所 有 的 元 素 总 是 默认 地 自动 向 左上 角 靠 近 , 在 设计 时 ,通过 控制 元 素 相对 位 
置 的 方式 使 其 达到 预计 的 效果 , 即 元 素 的 位 置 依赖 于 相 邻 元 素 的 位 置 和 尺寸。 


3.1.1 合成 布局 模型 


WPF 的 合成 布局 模型 是 用 来 满足 广泛 的 应 用 场景 布局 ,允许 某 种 布局 控件 被 幅 套 在 其 
他 布局 控件 中 。 合 成 布局 模型 通过 布局 契约 来 实现 子 控件 和 父 布局 控件 间 的 通信 问题 。 布 
局 契约 包括 两 种 设计 思想 , 即 根据 内 容 调整 尺寸 和 两 段 布局 。 

1. 根据 内 容 调整 尺寸 

根据 内 容 调整 尺寸 , 即 每 个 控件 都 根据 内 容 来 确定 控件 大 小 ,这 个 设计 思想 应 用 于 UI 
中 的 所 有 控件 。 例 如 ,窗口 能 够 调整 大 小 来 适应 它们 内 部 的 控件 ,文本 框 控件 能 调整 尺寸 来 
适应 它 内 部 的 文本 。 当 然 每 个 元 素 会 被 询问 其 期 望 的 尺寸 大 小 ,以 确保 根据 内 容 调整 尺寸 
的 设计 思想 能 够 实施 。 

2. 两 段 布局 

两 段 布局 是 指 在 两 个 完全 不 同 的 阶段 来 确定 控件 的 最 佳 尺寸 。 在 这 两 个 阶段 布局 模型 
让 父 布局 控件 和 子 控件 达成 元 素 最 后 尺寸 的 约定 。 两 个 阶段 分 别 是 测量 (Measure) 和 排列 
(Arrange) 。 测 量 阶段 需要 做 的 主要 工作 是 : 对 整个 UT 页 面 的 检测 ,并 询问 每 个 元 素 的 期 
HR f (Desired Size) ,元 素 返回 一 个 可 用 的 尺寸 (Available Size) , 当 所 有 的 元 素 都 被 询问 
并 测量 好 以 后 ,就 进入 到 排列 阶段 。 在 排列 阶段 , 父 元 素 通 知 每 个 子 元 素 的 实际 尺寸 
(Actual Size) 和 位 置 。 

在 两 段 布局 中 , 父 元 素 和 子 元 素 需 要 协商 出 需要 的 尺寸 大 小 ,涉及 可 用 尺寸 .期 望 尺寸 、 
实际 尺寸 ,在 此 辨析 3 个 尺寸 。 其 中 ,可 用 尺寸 是 测量 阶段 的 初始 约束 值 , 即 父 元 素 愿 意 给 
子 元 素 的 最 大 空间 值 ; 期 望 尺寸 是 子 元 素 想 要 的 尺寸 ; 实际 尺寸 是 父 元 素 分 配给 子 元 素 的 
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最 终 尺 寸 。 这 3 个 尺寸 要 符合 下 面 的 不 等 式 条 件 。 

Desired Sizes Actual Size<Available Size 

了 解 WPF 合成 布局 模型 ,学习 WPF 布局 机 制 , 才 能 理解 合成 布局 模型 的 来 龙 去 脉 ,在 
页 面 布 局 时 做 到 得 心 应 手 。 


3.1.2 布局 机 制 


WPF 界面 上 的 每 个 元 素 的 边界 框 尺 寸 和 排列 是 WPF 自动 计算 出 来 的 。 通 过 WPF 合 
成 布局 模型 的 学 习 , 了 解 WPF 泻 染 布局 的 过 程 中 ,执行 测量 (Measure) MIHEZ (Arrange) 两 
个 步骤 。 在 布局 机 制 中 ,详细 分 解 在 WPF 布局 的 不 同 阶段 ,后 台 类 的 调用 过 程 。 在 测量 阶 
段 ,布局 容器 遍历 所 有 子 元 素 , 并 询问 子 元 素 所 期 望 的 尺寸 ; 在 排列 阶段 ,布局 控件 在 合适 
的 位 置 放置 子 元 素 ,并 设置 元 素 的 最 终 尺寸 ; 这 是 一 个 递归 的 过 程 , 界 面 中 任何 一 个 容器 元 
素 都 会 被 遍历 到 。 

因为 面板 可 以 嵌 套 ,所 以 处 理 过 程 是 递归 的 ,布局 (Layout) 处 理 的 过 程 如 图 3. 1 所 示 。 





UlElement.Measure(Size availableSize) 


rr 


FrameworkElement.MeasureCore(Size availableSize) 


i 


FrameworkElement.MeasureOverride(Size availableSize) 


i 


| UlElement.Arrange(Rect finalRect) 


i 


| FrameworkElement.ArrangeCore(Rect finalRect) 


i 


| FrameworkElement.ArrangeOverride(Rect finalRect) 






































3.1 WPF 布局 原理 


在 此 ,简要 说 明 WPF 布局 处 理 过 程 。 由 WPF 框架 可 知 ,所 有 UI 元素 的 根 元 素 是 
UIElement 类 型 ,在 UIElement 中 定义 了 一 些 基本 的 关于 UI 显示 的 属性 (如 Clip 和 
Visibility)。 在 UIElement. Measure(Size availableSize) 方 法 执行 阶段 ,就 是 对 这 些 基本 属 
性 做 评估 ,获得 适合 的 Size。 同 样 ,FrameworkElement. MeasureCore(Size availableSize) 方 
法 评估 时 ,在 FrameworkElement 中 定义 且 有 可 能 影响 UI 布局 的 属性 ,得 出 更 适合 的 Size. 
这 个 Size 将 被 传递 给 FrameworkElement. MeasureOverride ( Size availableSize) 方 法 。 
WPF 提供 的 Panel 类 型 (如 Grid) 中 就 会 重 写 该 方法 来 处 理 , 处 理 完 后 将 得 到 一 个 系统 期 望 
的 Size( 称 为 DesiredSize) 。 布 局 系统 将 按照 这 个 Size 来 显示 该 Element, 测 量 (Measure) 阶 
段 结束 。Size 确定 后 ,把 Size 包装 为 Rect 实例 ,传递 给 UIElement. Arrange (Rect 
finalRect) ,进行 排列 (Arrange) 处 理 。 根据 Size fli. Arrange 方法 为 元 素 创建 边界 框 ,边框 
打包 到 Rect 实例 , 传 给 FrameworkElement. ArrangeCore(Rect finalRect) 方 法 。ArrangeCore 
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将 继续 评估 DesiredSize ,计算 边界 留 白 (Margin,Padding) 等 信息 ,获得 ArrangeSize, 并 传 给 
FrameworkElement. ArrangeOverride(Size finalSize) 。 这 个 方法 也 是 可 重 写 的 ,WPF 提供 
的 Panel 类 型 会 重 写 该 方法 来 处 理 , 最终 获得 finalSize。 当 finalSize 确定 后 ， 
ArrangeOverride 执行 完毕 ,控制 权 回 到 ArrangeCore 方法 , ArrangeCore 把 该 Element 放 
到 它 的 边界 框 中 。 到 此 ,该 Element 的 Layout 处 理 完成 。 


3.1.3 布局 通用 属性 


所 有 的 WPF 布局 面板 都 由 System. Windows. Controls. Panel 抽象 类 派生 。Panel 就 
是 所 有 布局 元 素 的 基 类 ,用 于 放置 和 排列 WPF 元 素 , 这 个 抽象 类 包含 3 个 公共 属性 : 
Background、Children 和 IsItemHost C IsItemHost 标志 着 控件 是 不 是 类 似 TreeView 和 
ListView 这 样 的 控件 )。 布 局 容器 内 的 子 元 素 对 自身 的 对 齐 方式 (HorizontalAlignment、 
VerticalAlignmenO ,5£ EE (Width) ,高 度 (Height)、 四 周 间 隙 (Margin) 等 有 一 定 的 决定 权 。 
子 元 素 可 以 设置 自身 的 布局 属性 来 调整 自己 的 位 置 和 大 小 。 表 3. 1 给 出 了 WPF 布局 面板 
中 的 通用 属性 。 


表 3.1 WPF 布局 面板 中 的 通用 属性 
































属性 名 称 表征 意义 
Background 布局 面板 背景 着 色 , 在 响应 鼠标 事件 时 ,该 值 非 空 ( 含 透 明 ) 
Children 布局 面板 中 存储 的 条 目 集合 ,条 目 还 可 以 含 更 多 的 条 目 
IsItemHost 布尔 值 ,是否 为 由 ItemsControl 生成 的 UI 项 的 容器 
HorizontalAlignment 水 平 对 齐 方式 ,有 Center, Left, Right Stretch 属性 值 可 选 
VerticalAlignment 垂直 对 齐 方式 ,有 Center. Left, Right, Stretch 属性 值 可 选 
MinWidth/MinHeight 最 小 宽度 尺寸 /最 小 高 度 尺寸 ,默认 单位 是 像素 
MaxWidth/MaxHeight 最 大 宽度 尺寸 /最 大 高 度 尺寸 ,默认 单位 是 像素 
Width/Height 宽度 尺寸 /高 度 尺 寸 , 默 认 单 位 是 像素 
Margin 在 元 素 周围 空白 尺寸 ,默认 单位 是 像素 

3.2 布局 面板 


WPF 的 布局 面板 实现 基本 的 布局 ,布局 面板 类 型 有 Canvas, DockPanel, StackPanel, 
WrapPanel,Grid 和 UniformGrid。 在 这 一 节 中 ,不 涉及 Grid, HX Grid 灵活 ,适用 场合 颇 
多 , 需 独立 讲解 。 表 3. 2 列 出 了 布局 面板 的 类 型 及 其 使 用 规则 。 


表 3.2 布局 面板 的 类 型 及 其 使 用 规则 











布局 面板 类 型 使 用 规则 

Canvas mt. H Top, Left, Right 和 Bottom 4 个 属性 将 子 元 素 定 位 

deii 停靠 面板 。 让 子 元 素 停靠 在 整个 面板 的 某 一 条 边 上 ,然后 拉 伸 元 素 以 填 满 全 部 宽度 
或 高 度 。 类 似 于 Windows Form 编程 中 控件 的 Dock 属性 

StackPanel 堆 式 面板 。 子 元 素 按照 声明 的 先后 顺序 , 自 上 往 下 或 从 左 往 右 摆 放 
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续 表 


布局 面板 类 型 使 用 规则 

自动 折 行 面板 。 子 元 素 按照 声明 的 先后 顺序 ,从 左 往 右 摆 放 , 摆 满 一 行 后 ,自动 折 行 。 
5j HTML 中 的 流 式 布局 相似 

Grid 网 格 。 通 过 定义 行 高 和 列 宽 来 调整 子 元 素 。 类 似 于 HTML 中 的 Table 
UniformGrid | 简化 网 格 布局 。 每 个 单元 格 具 有 相同 的 大 小 ,自动 创建 相同 的 行列 数 





WrapPanel 











3.2.1 Canvas 


Canvas( 夯 布 ) 是 WPF 中 最 简单 的 布局 控件 ,是 用 于 存储 控件 的 容器 ,不 会 自动 调整 内 
部 元 素 的 排列 及 大 小 , 它 仅 支持 用 显 式 坐 标定 位 控件 。 可 以 使 用 Left, Top. Right 和 
Bottom 附加 属性 在 Canvas 中 定位 控件 。 实 质 上 ,在 选择 每 个 控件 停靠 角 时 ,附加 属性 的 值 
是 作为 外 边 距 使 用 的 。 如 果 一 个 控件 没有 使 用 任何 附加 属性 , 它 会 被 放 在 Canvas 的 左上 方 
(等 同 于 设置 Left 和 Top 为 0) 。 
Canvas 实例 1, 设计 要 求 : 将 5 个 Button 按钮 分 别 放 在 画布 的 左上 角 、 右 上 角 、 左 下 
角 \ 右 下 角 和 中 心 位 置 。 使 用 XAML 代码 如 下 。 
< Canvas Width = "200" Height = "100" Background = "Beige"> 
< Button Content = "Left, Top" Canvas. Left = "4" Canvas. Top = "4"/> 
< Button Content = "Right, Top" Canvas. Right = "4" Canvas. Top = "4"/» 
< Button Content = "Left, Bottom" Canvas. Left = "4" Canvas. Bottom = "4"/» 
< Button Content = "Right, Bottom" Canvas. Right = "4" Canvas. Bottom = "4"/» 
< Button Content = "Center" Canvas. Left = "75" Canvas. Top = "38"/» 
«/Canvas > 
运行 上 述 代码 后 ,显示 页 面 效果 如 图 3. 2 所 示 。“ 画 布 ? 上 的 元 素 附加 属性 Canvas 
.Left Canvas. Top、Canvas. Right 和 Canvas. Bottom 来 完成 内 部 子 元 素 (Button) 的 定位 。 
这 里 的 Canvas. Left 和 Canvas. Top 属性 与 Windows Form 窗 体 控 件 的 Left 和 Top 属性 类 
似 ,Canvas. Left 属性 表示 距离 “画布 ?左边 的 距离 ,而 Canvas. Top 属性 表示 距离 “画布 " 顶 
部 的 距离 。 
Canvas 实例 2 ,设计 要 求 : 分 别 将 黄色 、 粉 红色 和 蓝 紫 色 3 个 Rectangle 放 到 画布 上 ,使 
用 XAML 代码 如 下 。 
<Canvas> 
< Rectangle Canvas. ZIndex = "3" Width = "60" Height = "60" Canvas. Top = "30" 
Canvas. Left = "30" Fill- "BlueViolet"/» 
< Rectangle Canvas. ZIndex = "1" Width = "60" Height = "60" Canvas. Top = "50" 
Canvas. Left = "50" Fill = "Yellow"/» 
< Rectangle Canvas. ZIndex = "2" Width = "60" Height = "60" Canvas. Top = "70" 
Canvas. Left = "70" Fill = "Pink"/» 
«/Canvas > 
运行 上 述 代码 后 ,显示 页 面 效果 如 图 3. 3 所 示 。“ 夯 布 * 上 的 元 素 附加 属性 Canvas 
.ZIndex 设置 不 同 颜色 的 Rectangle 声明 的 先后 顺序 ,从 视觉 效果 上 看 ,后 声明 的 蓝 紫 色 矩 
形 将 先 声明 的 矩形 框 覆盖 ,用 专业 术语 则 是 Canvas. ZIndex 设置 重 等 深度 。 
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图 3.2 Canvas 附加 属性 定位 3.3 Canvas. ZIndex 设置 重 等 深 度 


3.2.2 DockPanel 


DockPanel( 停 靠 面板 ) 让 子 元 素 停靠 在 整个 面板 的 某 一 条 边 上 。 当 多 个 子 元 素 停 靠 在 
相同 的 边 时 ,根据 声明 的 先后 顺序 依次 停靠 ,系统 默认 最 后 一 个 声明 子 元 素来 添 满 剩余 空 
间 。 打 开 Windows 计算 机 窗口 ,如 图 3. 4 所 示 ,该 窗口 是 利用 DockPanel 的 常见 布局 方式 。 
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3.4 Windows 计算 机 窗口 


现 将 Windows 计算 机 窗口 分 解 后 , 它 是 由 菜单 栏 .工具 条 、 文 件 夹 列表 框 、 详 细 信 息 列 
表 框 和 状态 栏 组 成 的 ,如 图 3.5 所 示 。 

现在 使 用 停靠 面板 来 创建 Windows 计算 机 窗口 的 基本 结构 ,在 此 用 Button 来 表示 所 
有 的 子 元 素 。XAML 代码 如 下 。 


< DockPanel > 

< Button DockPanel. Dock = "Top"> 菜 单 栏 区 域 </Button > 

< Button DockPanel. Dock = "Top"> 工 具 条 区 域 </Button > 

< Button DockPanel. Dock = "Bottom"> 状 态 栏 区 域 </Button > 

< Button DockPanel. Dock = "Left"> 文 件 夹 区 域 </Button> 

< Button DockPanel. Dock = "Right" > 详细 信息 列表 区 域 </Button> 
</DockPanel > 
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图 3.5 Windows 计算 机 窗口 分 解 


运行 上 述 代 码 后 ,页 面 显示 效果 如 图 3.6 所 示 。DockPanel. Dock 作为 Button 的 附加 
属性 ,用 来 设置 上 (Top)、 下 (Bottom) , 左 (Left)、 右 (Right) 的 停靠 位 置 。 


x 






图 3.6 ”DockPanel 构建 窗口 常用 布局 
下 面 通过 调整 Button 声明 的 顺序 来 改变 页 面 布局 结构 。XAML 代码 如 下 。 


< DockPanel > 

< Button DockPanel. Dock = "Top"> 菜 单 栏 区 域 </Button > 

< Button DockPanel. Dock = "Left"> 文 件 夹 区 域 </Button> 

< Button DockPanel. Dock = "Top"> 工 具 条 区 域 </Button > 

< Button DockPanel. Dock = "Bottom"> 状 态 栏 区 域 </Button> 

< Button DockPanel. Dock = "Right" > 详细 信息 列表 区 域 </Button > 
</DockPanel > 


运行 上 述 代码 后 ,页 面 显示 效果 如 图 3. 7 所 示 。 读 者 留意 会 发 现 , 在 文件 夹 区 域 与 详细 
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信息 列表 区 域 之 间 没 有 分 隔 条 。 具 有 分 隔 条 的 WPF 控件 是 GridSplitter, 它 依赖 于 Grid 控 
件 , 后 续 章 节 将 对 其 进行 讨论 。 








图 3.7 调整 Button 声明 顺序 改变 布局 结构 


3.2.3 StackPanel 


StackPanel( 堆 式 面板 ) 将 子 元 素 按照 声明 的 先后 顺序 堆 在 一 起 。 设 置 Orientation 属性 
值 确定 以 水 平 或 垂直 方向 堆放 。 

在 StackPanel 中 ,根据 子 元 素 的 最 大 尺寸 来 确定 最 佳 尺 寸 。 设 计 StackPanel 实例 ,页 
面 显示 效果 如 图 3. 8 所 示 。 

设计 要 求 : 在 最 外 层 是 边框 环绕 ,内 部 一 个 StackPanel 中 再 嵌 套 两 个 StackPanel, 子 元 
素 用 Button,XAML 代码 如 下 。 


< Border BorderBrush = "Black" BorderThickness = "1" 
HorizontalAlignment = "Center" VerticalAlignment = "Center"> 
< StackPanel Height = "154" Width = "221"> 
< StackPanel Margin = "2" Background = "Yellow" Orientation = "Vertical"> 
< Button Content = "One" Margin = "1"/> 
< Button Content = "Two" Margin = "1"/> 
< Button Content = "Three" Margin = "1"/> 
< Button Content = "Four" Margin = "1"/> 
< Button Content = "Five" Margin = "1"/> 
</StackPanel > 
< StackPanel Margin = "2" Background = "pink" Orientation = "Horizontal"> 
< Button Content = "One" Margin = "3"/> 
< Button Content = "Two" Margin = "3"/> 
< Button Content = "Three" Margin = "3" /> 
< Button Content = "Four" Margin = "3"/> 
< Button Content = "Five" Margin = "3"/> 
</StackPanel > 
</StackPanel > 
</Border > 
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StackPanel 会 根据 方向 使 用 无 限 宽度 和 高 度 来 测量 子 控件 , 当 有 其 他 布局 同时 出 现时 ， 
会 影响 布局 的 整体 风格 。 本 例 中 ,通过 最 外 层 的 Border 对 StackPanel 进行 约束 。 

StackPanel 适合 局 部 页 面 布 局 , 接 下 来 用 它 做 一 个 简单 的 用 户 搜索 页 面 。 页 面 效 果 如 
图 3.9 所 示 。XAML 代码 如 下 。 


< StackPanel Background = "AliceBlue"> 

< TextBlock Margin = "4"> Look for:</TextBlock> 

< ComboBox Margin = "4"»«/ComboBox > 

< TextBlock Margin = "4"> Filtered by:</TextBlock > 

< ComboBox Margin = "4"></ComboBox> 

< Button Margin = "4, 5"» Search </Button > 

< CheckBox Margin = "4"» Search in titles only </CheckBox> 

< CheckBox Margin = "4"» Search in Keyword «/CheckBox » 
«/StackPanel > 


图 3. 9 是 由 两 个 TextBlock ,两 个 ComboBox, 两 个 CheckBox 和 一 个 Button 构成 的 页 
面 ,设置 Margin 属性 让 页 面 保持 清爽 。 
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图 3.8 3 个 StackPanel itf 3.9 用 户 搜索 页 面 


3.2.4 WrapPanel 


WrapPanel( 自 动 折 行 面板 ) 人 允许 任意 多 的 子 元 素 按 照 声明 的 先后 顺序 ,从 左 往 右 摆 放 ， 
摆 满 一 行 后 ,自动 折 行 。 折 行 面板 的 经 典 的 例子 就 是 工具 条 布局 。 

默认 情况 下 , WrapPanel 根据 子 元 素 的 内 容 , 自 动 调整 控件 的 大 小 。 也 可 以 设置 
ItemWidth 和 ItemHeight 属性 来 约束 子 元 素 的 宽度 和 高 度 。WrapPanel 布局 10 个 
Button ,如 图 3. 10 与 图 3. 11 所 示 。 





3 MainWindow — 


One [Two|Three |Four|Five [six| Seven Eight [Nine|Ten 


图 3.10 WrapPanel 布局 10 个 Button 3.11 折 行 的 Button 




















由 图 3. 10 可 知 ,XAML 代码 如 下 。 


< WrapPanel Background = "AliceBlue"> 
< Button» One </Button > 
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< Button > Two </Button > 

< Button > Three </Button > 
< Button > Four </Button > 
< Button > Five </Button > 
< Button > Six </Button > 

< Button > Seven </Button > 
< Button > Eight </Button > 
< Button > Nine </Button > 
< Button > Ten </Button > 

</WrapPanel > 


把 图 3. 10 中 的 窗口 宽度 变 窗 ,调整 到 一 行 放 5 个 Button, 图 3. 10 会 变 成 图 3. 11 的 效果 。 
3.2.5 UniformGrid 


UniformGrid( 简 化 网 格 布局 ) 隐 含 在 System. Windows. Controls. Primitives 名 称 空间 
中 。 每 个 单元 格 具 有 相同 的 大 小 。 在 使 用 UniformGrid 布局 时 ,需要 设 定 行 值 与 列 值 。 下 
面 使 用 UniformGrid 对 6 个 Button 布局 ,XAML 代码 如 下 。 


< Border BorderBrush = "Black" BorderThickness = "1" 

HorizontalAlignment = "Center" VerticalAlignment = "Center"> 

< UniformGrid Rows = "3" Columns = "2" Background = "Green" > 
< Button Content = "One" Margin = "1"/> 
< Button Content = "Two" Margin = "1"/> 
< Button Content = "Three" Margin = "1"/> 
< Button Content = "Four" Margin = "1"/> 
< Button Content = "Five" Margin = "1"/> 
< Button Content = "Six" Margin = "1"/> 

</UniformGrid> 

</Border > 


运行 上 述 代 码 , 页 面 显 示 效 果 如 图 3. 12 所 示 。UniformGrid 布局 是 绿色 背景 ,6 个 
Button ,按照 3 行 2 列 生成 大 小 相同 的 单元 格 。 

在 使 用 UniformGrid 布局 时 ,如 果 只 设 定 列 值 ,那么 行 值 等 于 子 元 素 的 数目 除 以 列 值 ; 
如 果 只 设 定 行 值 ,那么 列 值 等 于 子 元 素 的 数目 除 以 行 值 。 接 下 来 ,使 用 UniformGrid 布局 6 
个 Button JJ 2 £3 3 JN. XAML 代码 如 下 。 


« Border BorderBrush - "Black" BorderThickness - "1" 
HorizontalAlignment = "Center" VerticalAlignment = "Center"» 
< UniformGrid Columns = "3" Background = "Green" > 
< Button Content = "One" Margin- "1"/» 
< Button Content = "Two" Margin- "1"/> 
< Button Content = "Three" Margin = "1"/» 
< Button Content = "Four" Margin = "1"/» 
< Button Content = "Five" Margin = "1"/> 
< Button Content = "Six" Margin = "1"/> 
«/UniformGrid-» 
«/Border > 


运行 上 述 代 码 , 页 面 显 示 效 果 如 图 3. 13 所 示 。 代 码 中 只 设置 了 “Columns 一 "3"”， 
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UniformGrid 布局 6 个 Button, 系 统 行 值 等 于 6 除 于 2, 自 动 生 成 2 行 3 列 的 UniformGrid 
网 格 布局 。 





























图 3.12 网 格 3X2 的 UniformGrid 3.13 网 格 2X3 的 UniformGrid 


使 用 UniformGrid 布局 的 网 格 宽度 是 所 有 子 元 素 中 的 最 大 宽度 值 ; 高 度 是 所 有 子 元 素 
中 的 最 大 高 度 值 。 用 UniformGrid 布局 3X3 的 网 格 ,XAML 代码 如 下 。 


< UniformGrid Columns = "3" Rows = "3" Background = "AliceBlue" > 
< Button Content = "One" Margin = "1"/> 
< Button Content = "Two" Margin = "1"/> 
< Button Content = "Three" Margin = "1"/> 
< Button Content = "Four" Margin = "1"/> 
< Button Content = "Five" Margin = "1"/> 
< Button Content = "Six" Margin = "1"/> 
< Button Content = "Seven" Margin = "1"/> 
</UniformGrid> 


运行 上 述 代码 ,页面 显 示 效 果 如 图 3. 14 所 示 。 由 图 3. 14 可 知 ,当代 码 中 给 出 的 单元 格 
数 大 于 子 元 素 的 数目 ,依次 摆 放 后 ,余下 的 单元 格 为 空 。 

修改 上 述 XAML 代码 ,将 “Rows 二 "3"” 改 成 “Rows 二 "2"”, 运 行 代码 ,页 面 显示 效果 如 
图 3.15 所 示 。 可 知 , 当 系 统 提 供 的 单元 格 数 小 于 子 元 素 的 数目 ,UniformGrid 把 最 后 一 个 
子 元 素 放 到 了 边界 外 。 





























图 3.14 网 格 3X3 的 UniformGrid 3.15. 子 元 素 大 于 网 格 单元 数 的 UniformGrid 


3.3 Grid 


尽管 UniformGrid 能 够 布局 统一 单元 格 , 但 是 很 多 布局 中 需要 构建 单元 格 大 小 不 等 ， 
具有 跨越 式 单元 格 (Span Cells) 和 空白 列 等 功能 。 而 Grid 能 实现 上 述 这 些 功 能 , 它 是 一 个 
使 用 灵活 、 能 构建 复杂 UI 的 布局 控件 。 

Grid 最 简单 的 用 法 是 通过 设置 RowDefinitions 和 ColumnDefinitions 属性 定义 单元 格 
的 总 数 。 其 中 ,RowDefinitions 18 £13 . ColumnDefinitions 指 列 数 。 添 加 子 元 素 时 ,使 用 
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Grid. Row 和 Grid. Column 附加 属性 设 定子 元 素 在 单元 格 中 的 位 置 。 接 下 来 ,用 Grid 布局 
6 个 Button, 单 元 格 排列 成 3 行 2 列 。XAML 代码 如 下 。 


< Grid Background = "green"> 
< Grid. RowDefinitions > 
< RowDefinition ></RowDefinition> 
< RowDefinition ></RowDefinition> 
< RowDefinition ></RowDefinition> 
</Grid. RowDefinitions > 
< Grid. ColunnDefinitions > 
< ColumnDefinition ></ColumnDefinition> 
< ColumnDefinition ></ColumnDefinition> 
«/Grid. ColumnDefinitions > 
< Button Grid. Row = "0" Grid. Column = "0" Margin = "2"> One </Button > 
< Button Grid. Row = "0" Grid. Column = "1" Margin = "2" > Two «/Button? 
< Button Grid. Row = "1" Grid. Column = "0" Margin = "2"> Three </Button > 
< Button Grid. Row = "1" Grid. Column = "1" Margin = "2"> Four </Button > 
< Button Grid. Row = "2" Grid. Column = "0" Margin = "2" > Five </Button > 
< Button Grid. Row = "2" Grid. Column = "1" Margin = "2"> Six </Button > 
</Grid> 


运行 上 述 代码 ,页 面 显示 效果 如 图 3. 16 所 示 。 当 调整 窗口 大 小 时 ,Button 大 小 随 着 窗 
口 的 变化 而 变化 。 

在 很 多 应 用 程序 中 都 会 有 登录 页 面 的 设计 ,在 此 ,使 用 Grid 布局 用 户 登录 页 面 ,XAML 
代码 如 下 。 


< Grid Background = "AliceBlue"> 
< Grid. ColumnDefinitions > 
< ColumnDefinition ></ColumnDefinition> 
< ColumnDefinition ></ColumnDefinition> 
</Grid. ColumnDefinitions > 

< Grid. RowDefinitions > 
< RowDefinition ></RowDefinition> 
< RowDefinition ></RowDefinition> 
< RowDef inition ></RowDefinition> 

«/Grid. RowDefinitions > 
< TextBlock Text = "Username: " VerticalAlignment = "Center" FontSize = "20" 
HorizontalAlignment =" Center" FontFamily= "Times New Roman" > 
</TextBlock > 
< TextBlock Text = "Password: " Grid. Row = "1" VerticalAlignment = "Center" 
HorizontalAlignment = "Center" FontSize = "20" FontFamily = "Times New Roman"> 
</TextBlock > 
< TextBox Grid. Column = "1" Margin = "25" FontSize = "20"></TextBox > 
< TextBox Grid. Column = "1" Grid. Row - "1" Margin = "25" FontSize = "20"></TextBox > 
< Button Grid. Row = "2" Margin = "25" Content = "Login" FontSize = "20" FontFamily = "Times 
New Roman" Background = "LightBlue"> 
«/Button» 

< Button Grid. Row = "2" Margin = "25" Content = "Cancel" Grid. Column = "1" FontSize = 

"20" FontFanily = "Times New Roman" /> 
«/Grid» 
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运行 上 述 代码 ,页面 显示 效果 如 图 3. 17 所 示 。 该 登录 页 面 含有 两 个 TextBlock、 两 个 
TextBox 和 两 个 Button, 共 6 个 子 元 素 。 当 窗口 大 小 变化 时 ,页 面子 元 素 会 随 着 窗口 的 大 
小 动态 调整 。 





A3 MeinWindow 0 [rer 





Username : 



































3.16 3X2 的 Grid 图 3.17 Grid 布局 登录 界面 


上 面 的 两 个 例子 ,显示 了 基本 的 Grid 布局 网 格 的 用 法 ,但 并 没有 充分 实现 Grid 的 重要 
特征 。 下 面 从 结构 中 分 离 布局 .尺寸 模型 \ 共 享 尺 寸 组 .跨越 行 和 列 与 GridSplitter 等 方面 
来 演示 Grid 的 多 种 用 法 。 


3.3.1 从 结构 中 分 离 布局 


前 面 讲 到 的 WPF 布局 面板 ,都 是 通过 改变 元 素 的 声明 顺序 来 改变 布局 结构 ,因为 声明 
顺序 不 同 ,所 以 布局 结构 也 会 不 同 。WPF 除 Grid 以 外 的 布局 面板 ,首先 ,将 布局 面板 融入 
可 视 化 树 中 ,便于 调用 布局 算法 。 然 后 ,根据 声明 子 控件 声明 的 顺序 , 设 定 布局 结构 。 

Grid 能 从 结构 中 分 离 布局 , 指 的 是 不 依赖 子 元 素 的 声明 顺序 来 改变 布局 结构 。 因 为 子 
元 素 可 以 通过 两 个 附加 属性 进行 定位 。 下 面 对 6 个 Button 通过 设置 Grid. Row 和 Grid 
. Column 两 个 附加 属性 值 ,让 页 面 显示 与 Button 的 定义 顺序 相反 。XAML 代码 如 下 。 

<! -- 略 与 上 例 代码 相同 部 分 --> 

< Button Grid. Row = "2" Grid. Column = "1" Margin = "2"> One </Button > 

< Button Grid. Row = "2" Grid. Column = "0" Margin = "2" > Two </Button > 
< Button Grid. Row = "1" Grid. Column = "1" Margin = "2"> Three </Button > 
< Button Grid. Row = "1" Grid. Column = "0" Margin = "2"> Four </Button > 
< Button Grid. Row = "0" Grid. Column = "1" Margin = "2" > Five </Button > 
< Button Grid. Row = "0" Grid. Column = "0" Margin = "2"> Six </Button > 

</Grid> 

运行 上 述 代 码 后 ,页面 显示 效果 如 图 3. 18 所 示 。6 个 Button 布局 效果 与 Button 定义 
顺序 相反 ,是 通过 设置 附加 属性 Grid. Row 和 Grid. Column 的 值 来 改变 Button 的 输出 
顺序 。 

接 下 来 选用 Uniform Grid 布局 6 个 Button, XAML 代码 如 下 。 

< Border BorderBrush = "Black" BorderThickness = "1" 


HorizontalAlignment = "Center" VerticalAlignment = "Center"» 
< UniformGrid Columns = "2" Background - "Green" > 
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« Button Content = "Six" Margin = "1"/> 

« Button Content = "Five" Margin = "1"/> 
« Button Content = "Four" Margin= "1"/> 
« Button Content = "Three" Margin = "1"/» 
« Button Content - "Two" Margin- "1"/» 

« Button Content = "One" Margin- "1"/> 

«/UniformGrid» 
«/Border > 


运行 上 述 代码 ,页面 显 示 效 果 如 图 3. 19 所 示 ,在 使 用 UniformGrid 布局 时 ,只 能 通过 改 
变 元 素 定义 顺序 改变 布局 结构 。 


























图 3.18 设置 Grid 附加 属性 调整 布局 结构 图 3. 19 Uniform Grid 改变 元 素 顺序 改变 布局 结构 


Grid 布局 页 面 时 ,在 不 影响 代码 的 情况 下 ,通过 设置 Grid. Row 和 Grid. Column 两 个 
附加 属性 值 ,调整 布局 结构 ,这 种 从 结构 中 分 离 布 局 使 Grid 能 够 创建 控件 结构 。 


3.3.2 ”尺寸 模型 


在 Canvas 布局 中 ,要 使 用 元 素 绝对 值 来 分 割 空间 ; 而 Grid 引入 了 百分比 尺寸 ,也 就 是 
列 或 行 的 高 度 能 设置 为 星 花 (* ) 单 位 。 星 花 允许 行 和 列 在 按照 内 容 尺寸 或 绝对 尺寸 分 配 空 
间 后 ,占用 网 格 空间 的 一 个 百分比 值 。 

接 下 来 理解 * 的 用 法 ,XAML 代码 如 下 。 


< Grid Background = "green"> 
< Grid. RowDefinitions > 
< RowDef inition Height = "50"></RowDefinition > 
< RowDef inition Height = "1 * "></RowDefinition > 
< RowDef inition Height = "2 * "»«/RowDefinition» 
«/Grid. RowDef initions > 
< Grid. ColumnDefinitions > 
< ColumnDefinition Width = "80"»«/ColumnDef inition» 
< ColunnDefinition »«/ColumnDefinition- 
«/Grid. ColunnDef initions > 
< Button Grid. Row = "0" Grid. Column = "0" Margin = "2"> One «/Button» 
< Button Grid. Row = "0" Grid. Column = "1" Margin = "2" > Two </Button > 
< Button Grid. Row = "1" Grid. Column = "0" Margin = "2"> Three </Button > 
< Button Grid. Row = "1" Grid. Column = "1" Margin = "2"> Four </Button > 
< Button Grid. Row = "2" Grid. Column = "0" Margin = "2"> Five </Button> 
< Button Grid. Row = "2" Grid. Column = "1" Margin = "2"> Six </Button > 
«/Grid» 
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运行 上 述 代码 后 ,页 面 显示 效果 如 图 3. 20 所 示 。 第 0 行 第 0 列 的 Button One 的 高 度 
(Height 一 "50") 是 50 像素 ,宽度 (Width 一 "80") 是 80 像素 。Button Three 所 在 行 占 余 下 
空间 的 1/3,Button Five 所 在 行 占 余 下 空间 的 2/3。 还 使 用 了 Grid. Row Grid. Column 附 
加 属性 把 子 元 素 定 位 到 单元 格 。 在 此 ,需要 声明 的 是 ,Grid 的 行 和 列 都 是 从 0 开始 计数 的 ， 
如 果 没 有 指定 子 元 素 的 行列 值 , 则 子 元 素 默认 位 于 第 0 行 第 0 列 。 

将 上 述 代码 中 的 Height 与 Width 全 改 成 星 花 (* ) 单 位 的 XAML 代码 如 下 。 


< Grid Background = "green"> 
< Grid. RowDefinitions > 
< RowDefinition Height = "1 * "»«/RowDefinition? 
< RowDef inition Height = "2 * "»«/RowDefinition» 
< RowDefinition Height = "3 * "»«/RowDefinition» 
«/Grid. RowDef initions > 
< Grid. ColumnDef initions > 
< ColumnDefinition Width = "1 * "»«/ColumnDefinition? 
< ColumnDefinition Width = "1 * " »«/ColumnDefinition? 
«/Grid. ColumnDef initions > 
«Button Grid.Row- "0" Grid. Column = "O" Margin = "2"> One </Button > 
«Button Grid.Row= "0" Grid. Column = "1" Margin = "2" > Two </Button > 
«Button Grid.Row = "1" Grid. Column = "0" Margin = "2"> Three </Button > 
«Button Grid.Row= "1" Grid. Column = "1" Margin = "2"> Four </Button > 
«Button Grid.Row- "2" Grid. Column = "0" Margin = "2"> Five </Button > 
«Button Grid.Row = "2" Grid. Column = "1" Margin = "2"> Six</Button > 
</Grid> 


运行 上 述 代 码 后 ,页 面 显示 效果 如 图 3. 21 所 示 。 第 0 行 第 0 列 的 高 度 (Height 一 
"1 x*") 是 加 权 百 分 比 ,表示 占 总 数 (1 十 2 十 3 二 6) 中 的 1 份 , 即 六 分 之 一 ; 第 1 行 第 1 列 的 高 
度 占 六 分 之 二 ,第 2 行 第 2 列 的 高 度 占 六 分 之 三 。 同 理 , 可 求 Width 宽度 所 占 的 百分比 ,各 
为 二 分 之 一 。 














图 3.20 设置 Grid 附加 属性 调整 布局 结构 图 3. 21 Uniform Grid 改变 元 素 顺 序 改变 布局 结构 


Height 属性 和 Width 属性 可 以 被 设置 成 绝对 值 .百分比 和 Auto。 当 采用 绝对 值 时 , 像 
素 是 默认 单位 ,可 省 略 。 

设置 行 高 或 者 列 宽 时 ,除了 可 以 使 用 像素 作为 单位 外 ,还 能 使 用 厘米 (Centimeter)、 英 
才 (Inch) 和 点 (Point) 。 它 们 与 像素 之 间 的 换算 关系 如 下 。 

* lcm 一 (96/2. 54) pixel; 

* lin—96pixel; 
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e lpt=(96/72)pixel, 
3.3.3 共享 尺寸 组 


共享 尺寸 组 是 使 用 Grid 布局 时 ,位 于 同一 列 的 子 元 素 具 有 相同 的 尺寸 大 小 。 若 在 一 
窗 体 中 ,允许 一 组 控件 具有 相同 的 尺寸 ,尺寸 大 小 由 最 宽 的 那个 控件 来 决定 。 

设置 共享 尺寸 ,需要 两 个 步骤 。 首 先 , 在 某 一 列 或 行 上 设置 SharedSizeGroup 属性 ; 在 
控件 上 设置 “IsSharedSizeScope 二 "True"”。 

为 了 演示 这 个 效果 ,对 位 于 同一 窗口 的 4 个 Button 实现 共享 尺寸 。XAML 代码 如 下 。 


< StackPanel > 
< Grid IsSharedSizeScope = "True" 
< Grid. RowDefinitions > 
< RowDef inition »«/RowDefinition- 
< RowDef inition »«/RowDefinition» 
«/Grid. RowDef initions > 
« Grid. ColumnDefinitions > 
< ColunnDefinition Width = "Auto" SharedSizeGroup = "a"/» 
< ColumnDefinition Width = "Auto" SharedSizeGroup = "a"/» 
«/Grid. ColumnDefinitions > 
< Button Grid. Row = "0" Grid. Column = "0"> One </Button > 
< Button Grid. Row = "0" Grid. Column = "1"> Two </Button > 
< Button Grid. Row = "1" Grid. Column = "0"> Three(which is longer)</Button > 
< Button Grid. Row = "1" Grid. Column = "1"> Four </Button > 
</Grid> 
</StackPanel > 


运行 上 述 代码 后 ,页面 显示 效果 如 图 3. 22 所 示 。 尽 管 列 中 设置 了 Width "Auto" fH 
是 4 个 Button 全 与 最 宽 的 那个 Button. 保持 一 致 ,因为 列 上 设置 了 共享 尺寸 分 组 
(SharedSizeGroup 一 "a") ,并 且 在 Grid 中 设置 “IsSharedSizeScope 一 "True"” 
HARTS rp i EIsSharedSizeScope— " True" " ffl* SharedSizeGroup = "a "Hus 后 ,页 
面 显示 效果 如 图 3. 23 所 示 。Button(Two) 与 Button(Four) 不 再 与 最 宽 的 Button ipm 
一 致 。 
T) MainWindow ET 
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图 3.22 设置 共享 尺寸 的 Grid 图 3. 23 未 设置 共享 尺寸 的 Grid 











3.3.4 跨越 行 和 列 


前 面 的 例子 ,用 Grid. Row 和 Grid. Column 附加 属性 把 子 元 素 定位 到 单元 格 。 还 可 以 
使 用 另外 两 个 附加 属性 Grid. RowSpan 和 Grid. ColumnSpan. 让 子 元 素 跨越 多 个 单元 格 。 
下 面 使 用 Grid 设计 计算 器 的 页 面 ,XAML 代码 如 下 。 


< Grid Background = "Green" > 
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< Grid. RowDefinitions > 

<RowDefinition ></RowDefinition> 

< RowDefinition ></RowDefinition> 

<RowDefinition ></RowDefinition> 

< RowDefinition ></RowDefinition> 

< RowDefinition ></RowDefinition> 

<RowDefinition ></RowDefinition> 
</Grid. RowDefinitions > 
< Grid. ColumnDefinitions> 

<ColumnDefinition ></ColumnDefinition> 

< ColumnDefinition ></ColumnDefinition> 

< ColumnDefinition ></ColumnDefinition> 

< ColumnDefinition ></ColumnDefinition> 
«/Grid. ColumnDefinitions> 
< TextBox Grid. Row = "0" Grid. ColumnSpan = "4" Margin = "2,4,2,2"/> 
«Button Grid.Row- "1" Grid.Column Margin = "2"> 1 </Button > 
«Button Grid.Row= "1" Grid. Column = Margin = "2" > 2 </Button > 
«Button Grid.Row= "1" Grid. Column = Margin = "2"> 3 </Button > 
«Button Grid.Row = "1" Grid. Column Margin = "2"> + </Button > 
«Button Grid.Row- "2" Grid. Column Margin = "2" > 4 </Button > 
«Button Grid. Row= "2" Grid. Column = "1" Margin = "2"> 5 </Button > 
«Button Grid.Row = "2" Grid. Column = "2" Margin = "2"> 6 </Button > 
«Button Grid.Row= "2" Grid. Column = "3" Margin = "2" >- </Button> 
«Button Grid.Row- "3" Grid. Column = "O" Margin = "2"> 7 </Button > 
«Button Grid. Row= "3" Grid. Column = "1" Margin = "2"> 8 </Button > 
«Button Grid.Row = "3" Grid. Column = Margin = "2" > 9 </Button > 
«Button Grid. Row = "3" Grid. Column = "3" Margin = "2"> * </Button > 
«Button Grid.Row = "4" Grid. ColumnSpan = "2" Margin = "2"> 0 </Button > 
«Button Grid.Row = "4" Grid. Column = "2" Margin = "2" >.</Button> 
«Button Grid. Row = "4" Grid. Column = "3" Margin = "2">/</Button > 
«Button Grid.Row= "5" Grid. ColumnSpan = "2" Margin = "2"> Del </Button > 
«Button Grid. Row= "5" Grid. Column = "2" Grid. ColumnSpan = "2" Margin = "2"> = </Button > 

</Grid> 


运行 上 述 代 码 ,页 面 显示 效果 如 图 3. 24 所 示 。Grid 布局 6 行 4 列 网 格 。 页 面 是 由 一 个 
TextBox、17 个 Button 构成 。 

其 中 ,< TextBox Grid. Row— "0" Grid. ColumnSpan="4" Margin 王 "2.4,2,2"/> 这 条 
代码 中 的 “Grid. Row 二 "0"” 用 来 设置 TextBox 位 于 第 0 行 ;“Grid. ColumnSpan = "4"” i 
置 TextBox 占据 4 列 , 即 从 第 0 列 一 第 3 9]; "Margin—"2.4,2.2""iz E TextBox 与 四 周 
边界 的 左上、 右 、 下 相距 四 周 的 间隙 分 别 是 2 像素 、4 像素 、2 像素 、2 像素 。 

修改 上 述 代码 中 的 两 条 语句 : 


<Button Grid.Row= "4" Grid.ColumnSpan= "2" Margin= "2">0</Button> 
«Button Grid. Row= "5" Grid. ColumnSpan = "2" Margin = "2"> Del </Button > 


修改 后 的 语句 : 











«Button  Grid.Row- "4" Grid. RowSpan = "2" Margin = "2"> 0 </Button > 
«Button  Grid.Row- "4" Grid. RowSpan = "2" Grid. Column = "1" Margin = "2" > Del </Button > 
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修改 后 的 代码 ,页 面 显示 效果 如 图 3. 25 所 示 。 其 中 “Grid. RowSpan 一 "2"” 实 现 跨 









































图 3.24 Grid 布局 计算 器 页 面 3.25 设置 附加 属性 的 计算 器 页 面 


3.3.5 GridSplitter 


GridSplitter 是 网 格 分 割 线 。 它 支持 用 户 在 运行 时 编辑 行 或 列 , 当 用 户 移动 分 割 线 时 ， 
还 可 以 改变 行 高 列 宽 。 在 很 多 聊天 软件 的 页 面 布局 都 含有 分 割 线 。 接 下 来 ,设计 常用 的 “一 
上 二 下 式 ” 布 局 。 该 布局 的 上 面 是 一 个 菜单 栏 ,下 面 是 两 列 网 格 , 两 列 网 格 间 是 一 条 分 割 线 。 
在 布局 中 的 子 元 素 全 部 用 Button,XAML 代码 如 下 。 


< DockPanel > 
< Button Height = "20" DockPanel. Dock = "Top"> Menu </Button> 
<Grid> 

< Grid. ColumnDefinitions > 
< ColumnDefinition Width = "3 * "/> 
< ColumnDefinition Width = "7 * "/> 

</Grid. ColumnDefinitions > 
< Button VerticalContentAlignment = "Center" 

HorizontalContentAlignment = "Center"> Column1 </Button > 

< GridSplitter Width = "3"></GridSplitter > 
< Button VerticalContentAlignment = "Center" Grid. Column = "1" 


HorizontalContentAlignment = "Center" > Column2 </Button > 
</Grid> 


</DockPanel > 


运行 上 述 代码 ,页面 显示 效果 如 图 3. 26 所 示 , 当 程序 处 在 运行 状态 下 ,用 户 可 以 根据 需 
要 ,移动 Columnl 与 Column2 之 间 的 GridSplitter。 
将 图 3. 26 页 面 中 的 Column2 中 加 上 一 条 垂直 分 割 线 ,.XAML 代码 如 下 。 


<DockPanel > 
< Button Height = "20" DockPanel. Dock = "Top"> Menu </Button > 
«Grid» 
« Grid. ColumnDefinitions > 
< ColumnDefinition Width = "3 * "/» 
< ColunnDefinition Width = "7 * "/> 
«/Grid. ColunnDef initions > 
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« Button VerticalContentAlignment = "Center" 
HorizontalContentAlignment = "Center"» Columni «/Button > 
«GridSplitter Width = "3"></GridSplitter > 
< Button VerticalContentAlignment = "Center" Grid. Column = "1" 
HorizontalContentAlignment = "Center" » Column2 </Button > 
< Grid Name = "GridRightColumn" Grid. Row = "0" Grid. Column = "1"> 
< Grid. RowDefinitions > 
< RowDef inition ></RowDefinition > 
< RowDefinition ></RowDefinition> 
</Grid. RowDefinitions > 
< Button > Rowl </Button > 
<GridSplitter Height ="3" HorizontalAlignment = "Stretch" 
VerticalAlignment = "Bottom"></GridSplitter > 
< Button Grid. Row = "1"> Row2 </Button > 
«/Grid» 
«/Grid» 


«/DockPanel » 
</Window> 
运行 上 述 代码 ,页 面 显 示 效 果 如 图 3. 27 所 示 。 分 析 布 局 结构 发 现 ,在 DockPanel 下 是 
Grid,Grid 下 还 有 一 个 Grid。 其 中 ,语句 “< Grid Name— "GridRightColumn" Grid. Row 一 
"0" Grid. Column— "1">”? 指 的 是 为 第 2 个 Grid 命名 ,并 使 用 了 第 一 个 Grid 的 附加 属性 定 
位 ; “< GridSplitter Height —"3" HorizontalAlignment =" Stretch" VerticalAlignment = 


"Bottom">” 语 句 定义 垂直 分 割 线 水 平 拉 伸 。 








届 MainWindow [e © mnl 
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图 3.26 GridSplitter 实现 水 平分 割 图 3.27 GridSplitter 实现 水 平 十 垂直 分 割 


3.4 小 结 


本 章 重点 介绍 了 WPF 布局 原则 以 及 布局 面板 中 的 Canvas, DockPanel, StackPanel, 
WrapPanel 和 UniformGrid 的 适用 场合 ; 详细 介绍 了 Grid 从 结构 中 分 离 布 局 .尺寸 模型 、 
共享 尺寸 组 和 跨越 行列 等 特征 ,并 演示 了 Grid 的 多 种 用 法 。 本 章 中 的 案例 涉及 Windows 


窗口 页 面 


\ 用 户 搜索 页 面 、 用 户 登录 页 面 、 计 算 器 页 面 及 常用 布局 。 但 是 布局 内 容 远 不 止 这 


些 , 当 了 解 更 多 的 控件 以 后 ,可 以 做 出 个 性 化 的 布局 。 一 个 好 的 布局 ,能 让 UI 根据 用 户 的 





屏幕 大 小 ,窗口 的 大 小 ,并 根据 内 容 来 改变 尺寸 。 在 以 后 的 章节 中 还 会 陆续 补充 布 


局 的 相关 知识 。 
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习题 与 实验 3 


1. 简 述 流 式 布局 的 特点 。 
2. 分 析 如 图 3. 28 所 示 的 QQ 聊天 页 面 , 用 Grid 布局 页 面 , 页 面 中 出 现 的 元 素 用 
Button 表示 ,其 效果 如 图 3. 29 所 示 。 
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图 3.28 QQ 聊天 页 面 
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Æ 3.29 Grid 布局 QQ 聊天 页 面 


操作 提示 : QQ 聊天 页 面 的 结构 : 先 分 为 左右 结构 , 右 半 部 分 又 分 成 上 .中 .下 结构 ,用 
Grid 嵌 套 实现 。 在 内 部 页 面 共 用 3 根 GridSplitter 分 割 线 。 最 下 面 的 分 割 线 ,需要 指定 这 
个 属性 “Grid. Row—"1"", 





控件 


第 3 章 讲述 了 WPF 布局 原则 及 布局 库 中 的 各 布局 面板 的 用 法 。 每 个 应 用 程序 的 UI 
都 是 由 窗口 及 用 户 控 件 构成 的 。 在 UI 工具 包 出 现 之 前 ,就 开始 有 控件 。 用 户 的 界面 也 是 
由 控件 组 成 的 。 而 本 章 中 所 介绍 的 控件 都 继承 自 System. Windows. Control 类 的 元 素 。 

尽管 控件 有 自己 默认 的 外 观 , 但 是 完全 可 以 通过 属性 设置 控件 的 前 景色 或 背景 色 来 改 
变 控 件 的 外 观 。 在 深入 学 习 WPF 控件 之 前 , 先 来 了 解 WPF 控件 与 众 不 同 的 新 理念 : 内 容 


4.1 WPF 控件 新 理念 


由 第 1 章 内 容 可 知 , WPF 提供 了 统一 的 编程 模型 .语言 和 框架 ,可 以 把 WPF 视 为 UI 
文档 ,媒体 于 一 体 的 集成 开发 平台 。 在 WPF 之 前 的 框架 中 ,控件 不 灵活 。 以 Button 为 例 ， 
用 在 不 同 场 合 的 Button, 需 要 遵循 元 素 合成 (Element Composition) 的 原则 。 在 以 往 的 通过 
属性 添加 内 容 到 按钮 中 ,内 容 只 能 是 字符 串 类 型 ,而 WPF 中 ,Button 上 可 以 放置 一 张 图 片 ， 
这 就 用 到 了 “内 容 模型 "这 个 新 理念 。 


4.1.1 内 容 模 型 


WPF 使 用 大 多 数 开 发 人 员 所 熟悉 的 CLR 类 型 系统 。 设 置 Dutton 的 内 容 ,CS 代码 
如 下 。 

Button b = new Button( ) 

b.Content = "Hello WPF"; 

上 述 代码 中 Button 的 Content 属性 类 型 是 System. Object. 而 不 是 字符 串 。 在 XAML 
页 面 上 ,放置 一 个 Button 按钮 ,运行 程序 后 ,启动 WPF Inspector, 生 成 Button 的 可 视 化 树 
如 图 4.1 所 示 。 分 析 可 视 化 树 中 的 Button 按钮 可 知 , 它 是 由 3 个 元 素 合 成 的 ,如 图 4. 2 
所 示 。 

由 图 4.2 可 知 , 一 个 Button 是 由 ButtonChrome、ContentPresenter 和 TextBlock 3 个 
元 素 合 成 的 。 其 中 ,ButtonChrome 用 于 显示 按钮 背景 ,TextBlock 用 于 显示 基本 文本 的 类 
型 。 下 面 重点 介绍 ContentPresenter。 

1. ContentPresenter 

ContentPresenter 是 内 容 模型 的 呈现 器 .用 于 显示 Content 属性 中 的 数据 ,并 生成 一 个 
可 视 化 树 ,下 面 的 ContentPresenter 示例 用 于 显示 字符 串 和 日 期 时 间 , 后 台 CS 代码 如 下 。 


mag 控件 上 人 51 














Christian Mosers Application 
| WPF Inspector TE 
~ ClApplication (1 
~ C] Mainwindow (10) 
~ O Border (9 


~ Ol AdomerDecorator (8 
~ O] ContentPresenter (6 
- ord (5 
~ Œ Button (5) 
~| C] ButtonChrome (Chrome) | 

~ C ContentPresenter (2 
A TextBlock 1) 

国 Adomerl 














国 Visual Tree [I3l Logical Tree | 











4.1 只 有 一 个 Button 的 可 视 化 树 


public MainWindow() 
{ 
InitializeComponent(); 
StackPanel panel = new StackPanel(); 





Button 
ButtonChrome 


| ContentPresenter 


TextBlock 


4.2 Button 控件 的 元 素 合成 机 制 























ContentPresenter strPresenter = new ContentPresenter(); 


strPresenter.Content - "Hello WPF"; 
panel. Children. Add(strPresenter); 


ContentPresenter datePresenter - new ContentPresenter(); 


datePresenter.Content = DateTime. Now; 


panel. Children. Add(datePresenter); 


ContentPresenter elementPresenter - new ContentPresenter(); 


elementPresenter. Content - new Button(); 
panel. Children. Add(elementPresenter); 


Content 7 panel; 
} 


运行 上 述 代 码 , 它 的 可 视 化 树 如 图 4. 3 所 示 ,页 面 效 果 如 图 4.4 所 示 。 
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图 4.3 ContentPresenter 对 象 显示 不 同 
类 型 数据 的 可 视 化 树 
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图 4.4  ContentPresenter 对 象 
显示 数据 的 页 面 
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转 到 ContentPresenter 对 象 模型 ,查看 定义 ,代码 如 下 。 


public class ContentPresenter : FrameworkElement 
{ 
public object Content { get; set; } 
public string ContentSource { get; set; } 
public string ContentStringFormat { get; set; } 
public DataTemplate ContentTemplate { get; set; } 
public DataTemplateSelector ContentTemplateSelector { get; set; } 
public bool RecognizesAccessKey { get; set; } 
protected override Size ArrangeOverride(Size arrangeSize); 
protected virtual DataTemplate ChooseTemplate(); 
protected override Size MeasureOverride(Size constraint); 
protected virtual void OnContentStringFormatChanged( string 
oldContentStringFormat, string newContentStringFormat); 
protected virtual void OnContentTemplateChanged(DataTemplate 
oldContentTemplate, DataTemplate newContentTemplate); 
protected virtual void OnContentTemplateSelectorChanged(DataTemplateSelector 
oldContentTemplateSelector, DataTemplateSelector newContentTemplateSelector); 
protected virtual void OnTemplateChanged(DataTemplate oldTemplate, 
DataTemplate newTemplate); 
public bool ShouldSerializeContentTemplateSelector(); 
} 


分 析 ContentPresenter 对 象 模型 ,理解 其 工作 原理 。 首 先 ,ContentPresenter 检查 内 容 
包含 的 数据 类 型 ,若是 System. Windows. UIElement( 控 件 的 基 类 型 ) ,把 内 容 直 接 添 加 到 可 
视 化 树 中 即 可 ; 车 ContentTemplate 有 值 , 则 创建 一 个 UIElement 实例 ,并 把 实例 添加 到 可 
视 化 树 中 ; 若 ContentTemplateSelector 有 值 ,通过 它 找 到 模板 ,并 使 用 模板 创建 一 个 
UIElement 实例 ,并 把 实例 添加 到 可 视 化 树 中 ; 若是 能 转换 到 字符 串 的 TypeConverter 实 
例 , 可 以 把 Content 封装 到 TextBlock 里 ,并 把 这 个 TextBlock 添加 到 可 视 化 树 。 最 后 , 调 
用 Content 的 ToString 方法 ,把 返回 结果 封装 到 TextBlock 中 ,把 TextBlock 添加 到 可 视 化 
树 中 。 

上 例 是 Button 按钮 通过 内 容 呈 现 器 实现 简单 的 编程 模型 ,体现 了 元 素 合成 的 思想 。 对 
于 内 容 模型 ,有 Content, Items,Child,Children 4 种 通用 模式 ,并 通过 内 容 属 性 命名 4 种 模 
式 , 如 表 4.1 所 示 。 


表 4.1 内 容 属性 命名 模式 











单 /复数 对 象 元 素 
单一 Content Child 
多 重 Items Children 





T fif ContentPresenter li fap 5& i Zi dis JA «o 3 BE^E Items XJ $$ , Child 和 Children 两 
元 素 。 

2. Items 

ContentPresenter 适用 于 单一 的 内 容 模 式 , 若 是 多 重 内 容 模 式 , 则 需 用 Items 属性 ,CS 
代码 如 下 。 
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public MainWindow() 
í InitializeComponent(); 
ListBox 1 = new ListBox(); 
1. Items. Add("Hello"); 
1. Items. Add( "WPF" ); 
} 
3. Child 和 Children 
Button 和 Listbox 的 内 容 可 以 是 任意 对 象 ,而 有 些 控件 内 容 只 能 是 UIElement 类 型 ， 
其 对 应 的 内 容 模式 就 是 Child 和 Children. 
在 深入 学 习 Child 和 Children 内 容 模式 之 前 , 先 来 了 解 一 下 WPF 控件 的 类 型 。WPF 
的 架构 师 把 WPF 控件 大 致 可 以 分 为 三 类 : 内 容 控 件 (Content Controls) , 18 318 fF (Layout 
Controls) fil 5 id /F (Render Controls) 。 
前 面 提 到 的 Button 和 ListBox 属于 内 容 控件 ,它们 需要 与 其 他 元 素 一 起 工作 ,由 图 4.1 
的 Button 可 视 化 树 显示 ,ButtonChrome .ContentPresenter 和 TextBlock 3 个 元 素 合 成 一 个 
Button。 其 中 ,布局 控件 定位 其 他 控件 ,支持 多 重 内 容 模式 。 除 了 FlowDocumentViewer 以 
外 的 所 有 布局 面板 ,都 继承 自 Panel。 多 重 元 素 内 容 模型 如 下 。 
public abstract class Panel : FrameworkElement, IAddChild 
i protected Panel(); 
public UIElementCollection Children ( get; } 
) 


呈现 控件 就 是 把 内 容 显 示 在 屏幕 上 的 绘制 控件 。Ellipse 和 Rectangle 是 最 常见 的 呈现 
控件 。Border 类 是 为 单一 元 素 添加 边框 的 呈现 控件 ,内 容 模型 如 下 。 
public class Border : Decorator 
{ 
public Brush Background { get; set; } 
public Brush BorderBrush { get; set; } 
public Thickness BorderThickness { get; set; } 
public CornerRadius CornerRadius { get; set; } 
public Thickness Padding { get; set; } 
} 
内 容 模型 解决 了 编程 控件 内 容 的 多 样 性 问题 。 控 件 以 何 种 方式 呈现 其 外 观 , 即 控件 对 
外 的 表现 形式 又 是 怎样 体现 呢 ? 在 Button 按钮 内 部 的 ButtonChrome 是 如 何 呈 现 的 呢 ? 
下 面 通过 学 习 模板 来 理 出 头绪 。 


4.1.2 模板 


WPF 控件 具有 模板 系统 ,通过 属性 来 对 改变 其 外 观 。ButtonChrome 是 由 按钮 模板 创 
建 出 来 的 ,是 Button 的 内 容 呈 现 器 。 

在 先前 内 容 模型 中 ,将 WPF 控件 大 致 分 为 内 容 、 布 局 和 呈现 控件 3 种 类 型 。 其 中 ,所 
有 的 内 容 控件 都 支持 模板 ,模板 可 以 创建 一 种 特别 的 元 素 ( 如 ButtonChrome) 来 显示 其 外 
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观 。 内 容 控件 继承 自 Control, 并 具有 通用 名 为 Template 的 属性 。 

E XAML 文件 中 ,编写 一 个 Button 定义 代码 :<Button > The Button </Button >。 在 
不 影响 该 按钮 内 容 的 前 提 下 , 若 要 改变 这 个 按钮 的 外 观 ,需要 定义 一 个 新 的 模板 。 模 板 可 以 
看 作 可 视 化 树 的 创建 工厂 。 这 就 是 说 ,创建 模板 后 ,ControlTemplate 为 控件 创建 可 视 化 
树 ; DataTemplate 为 数据 创建 可 视 化 树 。 

定义 模板 时 ,要 明确 模板 的 目标 类 型 和 可 视 化 树 。XAML 代码 如 下 。 


< Button > 
< Button. Template > 
< ControlTemplate TargetType = "(x:Type Button} "> 
< Rectangle Fill = "Green" Width = "80" Height = "25"></Rectangle > 
</ControlTemplate > 
«/Button. Template > 
The Button 
</Button > 


ÍT ERARI ERAR EJE Button, WE 4.5 所 示 。 其 对 应 的 可 视 化 树 如 图 4. 6 
所 示 。 该 可 视 化 树 是 单一 的 绿色 矩形 。 
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图 4.5 以 绿色 矩形 作 模 板 的 按钮 图 4.6 绿色 矩形 作 模 板 的 按钮 的 可 视 化 树 


观察 绿色 矩形 作 模板 的 按钮 的 可 视 化 树 , 只 有 一 个 绿色 的 Rectangle。 在 按钮 的 可 视 化 
树 中 的 ButtonChrome, ContentPresenter 和 TextBlock 在 模板 中 是 不 存在 的 。 接 下 来 为 
Button 添加 Click 事件 。Click() 事 件 实现 的 功能 是 : 创建 Button 的 新 模板 ,让 Button 变 成 
椭圆 形 ,CS 代码 如 下 。 


private void Button Click(object sender, RoutedEventArgs e) 

{ 
ControlTemplate template = new ControlTemplate( typeof (Button) ) ; 
template. VisualTree = new FraneworkElementFactory(typeof(Ellipse)); 
template. VisualTree. SetValue(Ellipse.FillProperty, Brushes. Purple); 
template. VisualTree. SetValue(Ellipse.WidthProperty, 100.0); 
template. VisualTree. SetValue(Ellipse. HeightProperty, 30.0); 
((Button)sender).Template = template; 

í 


把 Click() 事 件 与 Button 建立 关联 ,在 XAML 代码 中 补充 代码 如 下 。 


Xam ms 





< Button Click = "Button Click" 


«/Button» 


单 击 绿色 和 矩形 按钮 ,页 面 显示 效果 如 图 4. 7 所 示 。 其 对 应 的 可 视 化 树 如 图 4. 8 所 示 。 
该 可 视 化 树 是 单一 的 紫色 椭圆 矩 形 。 
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图 4.7 以 紫色 椭圆 模板 的 按钮 图 4.8 紫色 椭圆 模板 的 按钮 的 可 视 化 树 


1. 模板 绑 定 

由 前 面 的 学 习 中 ,可 以 得 出 WPF 控件 的 3 个 原则 : 元 素 合成 ,内 容 的 多 样 性 和 简单 的 
编程 模型 。 其 中 ,元 素 合成 和 内 容 的 多 样 性 两 个 原则 是 可 以 通过 模板 来 实现 它们 。 然 而 , 改 
变 按钮 的 外 观 通过 定义 新 的 模板 来 实现 ,这 并 不 是 简单 的 编程 模型 。 

在 此 ,使 用 模板 的 属性 ,在 模板 控件 上 绑 定 属性 ,让 用 户 控 件 上 的 属性 来 自 定 义 模板 。 
XAML 代码 如 下 。 


<Grid> 
< Button 
BorderThickness - "3" 
BorderBrush = "GreenYellow" 
Background = "Bisque" 
Width = "100" 
Height = "30"> 
« Button. Template> 
< ControlTemplate TargetType = "(x:Type Button)" > 
< Border CornerRadius = "6" 
BorderThickness = "(TemplateBinding Property = BorderThickness]" 
BorderBrush = "(TemplateBinding Property = BorderBrush]" 
Background = " (TemplateBinding Property = Background} "> 
< ContentPresenter/» 
«/Border > 
«/ControlTemplate- 
«/Button. Template > 
</Button > 
</Grid> 


运行 上 述 代码 ,页 面 显示 效果 如 图 4. 9 所 示 : 模 板 绑 定 按钮 的 可 视 化 树 如 图 4. 10 所 示 。 


XAML 把 边框 (Border) 的 BorderThickness、BorderBrush 和 Background 属性 绑 到 了 Button 模 
板 。 注 意 , 绑 定时 属性 要 一 致 。 实 现 如 图 4. 9 所 示 的 页 面 效果 还 可 以 用 下 面 的 XAML 代码 。 
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图 4.9 模板 绑 定 按钮 图 4. 10 模板 绑 定 按钮 的 可 视 化 树 


<! -一 保留 与 上 例 相 同 代码 部 分 --> 
< Button. Template > 
< ControlTemplate TargetType = "(x:Type Button]" > 
< Border CornerRadius = "6" 
BorderThickness = "(TenplateBinding Property = BorderThickness]" 
BorderBrush = "(TemplateBinding Property = BorderBrush]"» 
< Rectangle Fill = "(TemplateBinding Property = Background]"/» 
«/Border > 
«/ControlTemplate > 
«/Button. Template> 
<! -- 保留 与 上 例 相 同 代码 部 分 --> 


运行 上 述 代 码 ,页 面 显示 效果 与 图 4.9 完全 相同 ,但 是 它们 的 可 视 化 树 是 不 一 样 的 ,请 
读者 仔细 分 析 和 辨别 。 

2. 模板 思维 

WPF 新 理念 中 还 隐 含 着 增 量 式 的 自 定义 控件 思想 。 使 用 WPF 的 模板 ,用 户 界 面 的 任 
意 部 分 都 能 自 定义 ,可 以 创建 更 友好 的 交互 模型 。Windows 属于 内 容 控件 ,现在 为 它 做 一 
个 模板 ,XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 --> 
Title- "Custom Window" Height = "350" Width = "525"> 
< Window. Template 
< ControlTemplate TargetType = "(x:Type Window} "> 
« Border BorderThickness - "2" BorderBrush - "Purple" 
Background = "GreenYellow"> 
<Grid> 
< Rectangle Fill = "Pink" Margin = "8" /> 
< TextBlock Margin = "90" Text = "(TemplateBinding Title]"/» 
«/Grid» 
«/Border » 
«/ControlTenplate > 
«/ Window. Template 
</Window> 


运行 上 面 的 代码 ,页 面 显示 效果 如 图 4. 11 所 示 , 窗 体 模板 的 可 视 化 树 如 图 4. 12 所 示 。 
在 今后 应 用 程序 的 设计 中 ,开发 人 员 可 采用 模板 技术 ,为 应 用 程序 做 出 个 性 化 的 页 面 ,使 用 





模板 思考 ,设计 出 更 友好 的 交互 页 面 。 




















图 4.11 窗 体 模板 图 4.12 窗 体 模板 的 可 视 化 树 


在 了 解 过 WPF 控件 中 的 内 容 模型 与 模板 的 新 理念 以 后 ,再 来 学 习 WPF 中 常用 的 控 
件 。 在 上 一 节 的 中 将 WPF 控件 大 致 分 为 内 容 、 布 局 和 呈现 控件 3 种 类 型 。 其 中 布局 控件 
在 第 3 章 中 已 详细 论述 ,这 里 不 再 袭 述 。 接 下 来 ,对 内 容 和 呈现 两 类 控件 要 做 更 细致 的 划 
分 。 按 照 控件 在 应 用 程序 的 主页 面 上 出 现 的 先后 顺序 , 先 来 学 习 WPF 中 的 菜单 .工具 栏 和 
状态 栏 控件 。 


4.2 菜单 .工具 栏 和 状态 栏 


菜单 与 工具 栏 位 于 主页 面 的 项 部 ,两 者 实现 的 功能 是 相同 的 。 不同 之 处 是 : 显示 位 置 
和 交互 模型 。 通 常情 况 下 ,菜单 有 层级 关系 ,并 固定 占用 了 顶部 很 少 的 屏幕 ; 工具 栏 在 菜单 下 
方 , 它 是 菜单 中 的 某 些 命令 或 快捷 方式 。 菜单 和 工具 栏 共同 实现 程序 功能 ,方便 用 户 操作 。 


4.2.1 Menu 


菜单 在 基于 元 素 合成 的 原则 下 ,包含 托管 在 Menu 或 ContentMenu 中 的 Menultem 1 
ft. 在 Windows 应 用 程序 中 ,其 位 于 窗口 的 顶部 。WPF 菜单 可 分 为 Menu 和 
ContextMenu 两 种 。 其 中 ,ContextMenu 称 为 上 下 文 菜单 ,只 有 当 用 户 发 出 请 求 ( 右 击 ) 或 
按 下 Shift 十 F10 组 合 键 时 ,会 弹出 上 下 文 菜 单 . 故 上 下 文 菜单 又 可 称 为 弹出 式 菜单 。 

通常 情况 下 ,菜单 位 于 窗口 的 顶部 ,但 在 WPF 中 ,菜单 可 以 放 到 任意 位 置 。 

因 菜 单 具有 层级 关系 ,在 创建 菜单 时 ,需要 添加 具有 层级 关系 的 Menultem 控件 到 
Menu 对 象 中 ,并 且 用 DockPanel 布局 控件 ,才能 让 菜单 显示 在 窗口 的 顶部 。 接 下 来 创建 菜 
单 ,XAML 代码 如 下 。 

< Window x:Class = "Menu. MainWindow" 

xmlns = "http://schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x= "http: //schemas. microsoft. com/winfx/2006/xaml" 
Title = "MainWindow" Height = "350" Width = "525"> 
< DockPanel LastChildFill = "False"> 
< Menu DockPanel. Dock = "Top"> 
< MenuItem Header = "_File"> 


< MenuItem Header = " Open" Click = "Open Clicked"/» 
< MenuItem Header = "_Exit" Click = "Exit Clicked"/> 
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</MenuItem> 

«Menultem Header = " Edit" 
< MenuItem Header =" Cut"/> 
< MenuItem Header = " Copy" /» 

</MenuItem> 

</Menu> 
</DockPanel > 
«/Window» 


运行 上 述 代码 , 单 击 File 菜单 ,页 面 显 示 效 果 如 图 4. 13 所 示 。 单 击 Edit 菜单 ,页面 显 
示 效 果 如 图 4. 14 所 示 。 代 码 中 的 “LastChildFil 王 "False"” 表 示 最 后 一 个 子 元 素 不 拉 伸 。 















































E} MainWindow i  MainWindow 
-一 Be [ES] 
Open Cut 
Exit Copy 
图 4.13 File 菜单 窗口 页 面 图 4.14 Edit 菜单 窗口 页 面 


现在 的 菜单 还 不 具有 交互 功能 , 接 下 来 对 File 菜单 下 的 Open 与 Exit 菜单 项 编写 Click 
事件 ,CS 代码 如 下 。 


public partial class MainWindow : Window 
{ 
public MainWindow() 
( 
InitializeComponent(); 
) 
void Open Clicked(object sender, RoutedEventArgs e) 
( 
OpenFileDialog ofd = new OpenFileDialog(); 
ofd. Filter = "文本 文件 | * .txt| 图 片 | * . jpg| 所 有 文件 | * . * "; // 过 滤器 
if (ofd.ShowDialog() == true) 
{ 
string file name = ofd.FileName; // 获 取 打 开 文 件 的 路 径 
) 
) 
void Exit Clicked(object sender, RoutedEventArgs e) 
{ 
Close(); 
) 
} 


运行 上 述 代码 后 ,选择 File 菜单 下 的 Open 菜单 项 ,打开 对 话 框 ; 选择 File 菜单 下 的 
Exit 菜单 项 ,结束 程序 。 


4.2.2 ToolBar 


工具 栏 位 于 菜单 下 方 ,具有 宿主 类 型 (ToolBarTray) 和 项 类 型 (ToolBar)。ToolBarTray 
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可 视 为 ToolBar 的 容器 ,用 于 调整 工具 栏 的 大 小 及 位 置 , 续 上 例 , 在 菜单 窗口 ,加 入 工具 栏 的 
XAML 代码 如 下 。ToolBar 通过 Band 和 BandIndex 两 属性 来 定位 。 


<! -- 保留 与 上 例 相同 代码 部 分 -一 > 
< DockPanel LastChildFill = "False"> 


<Menu> 


</Menu> 
< ToolBarTray DockPanel. Dock = "top"> 
<ToolBar> 
< Button > Open </Button > 
< Button > Cut </Button > 
< Button > Copy </Button > 
< Button» Paste </Button > 
< Button» Exit </Button > 
</ToolBar > 
< ToolBar Header = "Search"> 
< TextBox Width = "120" /> 
< Button Width = "25"> Go </Button > 
</ToolBar > 
</ToolBarTray> 
</DockPanel > 
</Window > 


运行 上 述 代码 ,页 面 显 示 效 果 如 图 4. 15 所 示 。 将 含有 Search 按钮 的 工具 栏 移动 到 
File 菜单 正 下 方 , 如 图 4. 16 所 示 。 
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LS — — ka —— - 
图 4.15 菜单 和 工具 栏 窗 口 图 4.16 被 移动 后 的 菜单 和 工具 栏 窗口 


工具 栏 可 用 做 控件 容器 ,如 本 例 中 的 搜索 框 就 是 一 个 文本 框 ,生活 中 常用 的 Web 浏览 
器 中 的 地 址 栏 则 是 一 个 组 合 框 。 


4.2.3 StatusBar 


状态 栏 控件 通常 位 于 窗 体 底部 ,用 于 显示 状态 文本 信息 。StatusBar 也 是 容器 控件 ,要 
呈现 信息 的 控件 是 它 的 子 元 素 。 续 上 例 ,在 菜单 工具 栏 窗口 加 入 状态 栏 的 XAML 代码 
如 下 。 
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<! -一 保留 与 上 例 相同 代码 部 分 --> 
</ToolBarTray> 
< StatusBar DockPanel.Dock = "Bottom" Background = "LightBlue"> 
< TextBox Text = "This is a StatusBar"></TextBox> 
</StatusBar > 
</DockPanel > 
</Window> 


运行 上 述 代 码 ,页 面 显示 效果 如 图 4. 17 所 示 。 本 例 中 的 TextBox 是 StatusBar 的 子 元 
素 , 用 来 显示 状态 信息 。 
ape 00707 
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4.17. 菜单 .工具 和 状态 栏 窗口 


在 应 用 程序 中 ,状态 信息 是 随 着 程序 的 运行 动态 变化 的 ,故此 其 内 部 元 素 应 该 命名 , 便 
于 后 台 操 作 , 同 时 应 该 设置 窗 体 的 属性 ,让 状态 栏 的 右 下 角 呈 现 调整 区 域 ,设置 窗 体 的 属性 : 
ResizeMode- "CanResizeWithGrip" 。 


4.3 容器 控件 


容器 控件 能 容纳 子 控件 ,并 为 子 控件 提供 可 视 化 的 分 组 功能 。 在 第 3 章 介 绍 的 布局 控 
件 都 可 视 为 容器 控件 。 本 节 重 点 讲述 Expander、GroupBox 和 TabControl 这 3 个 控件 。 


4.3.1 Expander 


Expander 是 可 以 展开 和 折 符 的 控件 ,由 标题 头 和 内 容 两 部 分 组 成 。Header 属性 设置 
标题 头 ; Content 属性 设置 内 容 。 下 面 构 建 Expander 12 fF. XAML 代码 如 下 。 


<Grid> 
< Expander Header = "Expander example"> 
< Border Margin = "6" Padding = "6"> 
<StackPanel > 
< TextBox» I am first textbox </TextBox > 
< TextBox > I am second textbox </TextBox > 
</StackPanel > 
</Border > 
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</Expander > 
</Grid> 
运行 上 述 代码 ,页 面 显示 效果 如 图 4. 18 所 示 ,默认 折 释 状态 ,内 容 隐 藏 ,但 是 占有 空间 。 
单 击 标题 头 ,展开 后 的 页 面 显示 效果 如 图 4. 19 所 示 。 如 果 让 代码 在 运行 后 , 即 为 展开 状态 ， 
则 要 设置 属性 “IsSExpanded 王 "True"”。 
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图 4.18 Expander RU HARR 图 4. 19 Expander 展开 效果 


4.3.2 GroupBox 


GroupBox 是 对 控件 进行 分 组 的 可 视 化 容器 控件 ,并 将 同类 控件 归 类 , 置 于 GroupBox 
控件 中 。 接 下 来 , 续 上 例 , 在 Expander 的 基础 上 加 入 GroupBox 控件 的 XAML 代码 如 下 。 


<! -- 保留 与 上 例 相同 代 码 部 分 --> 
</Expander > 
< GroupBox Header = "GroupBox example" Margin = "15,100,15,15"> 
< StackPanel > 
< RadioButton Content = "Male" IsChecked = "True"/> 
< RadioButton Content = "Female" /> 
«/StackPanel » 
«/GroupBox > 
«/Grid» 


运行 上 述 代 码 ,页 面 显示 效果 如 图 4. 20 BrzR . GroupBox 位 于 Expander. 下 方 ,两 者 是 
并 列 关 系 ,案例 中 的 控件 有 骨 套 关系 ,使 用 逻辑 树 来 表示 多 控件 层级 嵌 套 ,如 图 4. 21 所 示 。 
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图 4.20 GroupBox 分 组 页 面 图 4.21 多 控件 层级 谱 套 逻辑 树 
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4.3.3 TabControl 


TabControl 支持 传统 的 标签 风格 ,设计 用 户 界面 时 ,常会 用 选项 卡 设置 .标签 式 浏览 器 
等 。 接 下 来 ,在 上 例 的 基础 上 加 入 TabControl 控件 ,XAML 代码 如 下 。 


<Grid> 
<TabControl > 
< TabItem Header = "Tabl"> 
< StackPanel > 
<! -- 保留 与 上 例 相同 代码 部 分 -一 > 
</StackPanel > 
</TabItem> 
< TabItem Header = "Tab2"/> 
</TabControl > 
</Grid> 


运行 上 述 代码 ,页 面 显示 效果 如 图 4.22 所 示 。 该 例 中 的 控件 有 多 重 赃 套 关 系 ,逻辑 树 
表示 多 重 层 级 嵌 套 关系 ,如 图 4. 23 所 示 。 
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4.22 TabControl 控件 页 面 4.23 多 重 层级 嵌 套 逻辑 树 


本 节 中 的 3 个 控件 都 继承 自 HeaderedContentControl, HeaderedContentControl 又 继 
承 自 ContentControl。 故 此 ,有 些 书 上 也 把 它们 称 为 带 标题 的 内 容 控 件 。 


4.4 范围 控件 
WPF 具有 Slider,ScrollBar 和 ProgressBar 3 个 范围 控件 。 这 些 控件 在 规定 的 范围 内 


取 值 ,继承 自 RangeBase,RangeBase 又 继承 自 Control。 在 此 说 明 RangeBase 类 的 公共 属 
性 ,如 表 4. 2 所 示 。 
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表 4.2 RangeBase 的 公共 属性 
属 性 名 属性 描述 
Maximum 上 限 的 最 大 值 
Minimum 下 限 的 最 小 值 
LargeChange 属性 值 的 最 大 变化 
SmallChange 属性 值 的 最 小 变化 
Value 控件 当前 值 





当 Value 值 改变 时 ,Slider、ScrollBar 事件 响应 ,但 是 ProgessBar 控件 在 Value 变化 时 不 响 
应 , 它 能 响应 Click、Dragdrop、Dragover、Mousemove、Mouseup 和 Mousedown 3X 6 个 事件 。 


4.4.1 Slider 


Slider 控件 允许 用 户 在 可 视 化 的 最 小 值 和 最 大 值 范围 之 间 取 值 , 更 直观 。 下 面 学 习 
Slider 控件 ,XAML 代码 如 下 。 

« Slider Minimum = "0" Maximum = "100" Value = "50" IsSnapToTickEnabled = "True" 

TickPlacement = "Both" TickFrequency = "5"> 

«/Slider» 

运行 上 述 代码 ,页面 显示 效果 如 图 4. 24 所 示 , 带 有 记号 的 刻度 提升 用 户 体验 。 

在 设计 时 ,时 常会 遇 到 Slider 受 限 在 一 个 较 小 的 范围 内 ,此 时 可 用 3 个 属性 来 设置 ， 
XAML 代码 如 下 。 

< Slider Minimum = "0" Maximum = "100" Value = "50" IsSnapToTickEnabled = "True" 

TickPlacement = "BottomRight" TickFrequency = "5" IsSelectionRangeEnabled = "True" 


SelectionStart = "50" SelectionEnd = "90"> 
«/Slider» 


运行 上 述 代 码 ,页 面 显示 效果 如 图 4. 25 所 示 , 带 有 范围 选择 的 Slider. Slider 控件 中 用 
到 了 几 个 属性 ,它们 代表 的 含义 如 表 4. 3 所 示 。 



























































T} MeinWindow [EIS 而 MainWindow [EST 
图 4.24 带 刻 度 的 Slider 图 4.25 带 范围 选择 的 Slider 
表 4.3 Slider 的 属性 

属 性 名 属性 描述 
IsSnapToTickEnabled 是 否 加 标记 
TickPlacement 标记 位 置 
TickFrequency 标记 间隔 大 小 
IsSelectionRangeEnabled 是 否 加 范围 选择 
SelectionStart 选择 范围 初始 值 
SelectionEnd 选择 范围 终止 值 
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4.4.2 ScrollBar 


ScrollBar 控件 是 滚动 条 状态 3B EIE EE" Orientation ^ " Horizontal" ". 为 水 平 滚动 。 创 
Æ ScrollBar 控件 的 XAML 代码 如 下 。 

< ScrollBar Orientation = "Horizontal" Width = "250" Height = "20" 

Margin = "10" Background = "LightSalmon"» 

«/ScrollBar» 

运行 上 述 代码 ,页 面 显示 效果 如 图 4. 26 所 示 。 再 给 出 ScrollBar 属性 的 取 值 , XAML 
代码 如 下 。 

< ScrollBar Orientation = "Horizontal" Margin = "10" Width= "250" Height = "20" 


Background = "LightSalmon" Minimum = "8" Maximum = "340" Value = "98" 
«/ScrollBar» 


运行 上 述 代码 ,页 面 显 示 效 果 如 图 4.27 所 示 。 
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4.26 ScrollBar 图 4.27 带 取 值 范围 的 ScrollBar 


4.4.3 ProgressBar 

ProgressBar 称 为 进度 条 ,指示 当前 任务 的 工作 状态 ,不 与 用 户 发 生 交互 ,也 不 响应 鼠标 
事件 和 键盘 输入 。 在 大 多 数 情况 下 ,无 法 获知 任务 执行 时 间 , 将 IsIndeterminate 属性 设 为 
True, 此 时 ,在 窗口 中 添加 ProgressBar 控件 ,XAML 代码 如 下 。 

< ProgressBar Width = "200" Height = "15" IsIndeterminate = "True" /> 

运行 上 述 代码 ,页面 显 示 效 果 如 图 4. 28 所 示 ,ProgressBar 周期 性 地 显示 一 个 从 左 向 右 
的 绿色 进度 条 ,这样 来 表示 任务 正在 执行 。 在 代码 中 加 入 背景 色 及 前 景色 “Background 一 
"Orange" Foreground 一 "LawnGreen"” 属 性 设置 后 ,页 面 效 果 如 图 4. 29 所 示 。 进 度 条 可 以 
用 在 连接 远程 服务 器 程序 安装 过 程 、 下 载 数据 等 情况 ,给 用 户 一 个 系统 状态 反馈 。 
MainWindow — Lex ln 
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图 4.28 系统 默认 ProgressBar 的 样式 4.29 改变 背景 的 ProgressBar 


4.5 文本 编辑 器 控件 


WPF 提供 的 文本 编辑 器 控件 有 PasswordBox, TextBox, RichTextBox 和 InkCanvas。 
本 节 首 先 需 了 解 文 本 对 象 模型 。 
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4.5.1 文本 模型 


WPF 中 处 理 文本 数据 有 集合 模型 和 流 文本 模型 两 种 模型 。 集 合 模型 适用 于 动态 文本 
构建 和 文本 校 验 。 流 文本 模型 则 适用 于 富 文本 进行 编辑 。 

集合 模型 类 似 控件 的 属性 用 法 ,构造 文本 元 素 后 ,将 其 添加 到 其 他 文本 元 素 的 集合 上 。 
动态 添加 文本 的 CS 代码 如 下 。 

private void Button Click(object sender, RoutedEventArgs e) 

i FlowDocument document = new FlowDocument(); 

Paragraph para = new Paragraph(); 
para. Inlines. Add(new Run("Hello WPF")); 
document. Blocks. Add(para ) ; 

) 

文本 中 的 两 个 主要 元 素 是 块 元 素 和 行 元 素 。 块 元 素 的 载体 是 矩形 框 , 块 元 素 的 示例 是 
Paragraph 或 Table, 行 元 素 横 跨 多 个 行 , 行 元 素 的 示例 是 Span, Run 和 Bold。 块 元 素 对 应 
着 FlowDocument 中 的 Blocks 属性 ; 行 元 素 对 应 着 Paragraph 的 Inlines 属性 。 

流 文本 模型 把 文本 当 作 一 个 流 来 操作 ,不 太 容 易 理 解 。 人 们 所 熟知 的 UI 函数 库 
(User32, Windows Forms, Abstract Window Toolkit 等 ) 把 元 素 表示 为 树 ,每 个 元 素 有 一 个 
父 对 象 和 一 些 子 对 象 。 

在 典型 的 文本 函数 库 ( 如 Internet Explorer) 把 其 中 的 对 象 表示 为 一 个 文本 流 。 因 为 函 
数 库 构建 部 件 是 一 个 字符 串 流 , 所 以 其 中 的 元 素 都 视 为 一 个 文本 流 。 下 面 将 学 习 文 本 编辑 
器 控件 。 





4.5.2 PasswordBox 


PasswordBox 的 功能 与 文本 框 类 似 , 但 它 会 把 用 户 的 输入 显示 为 圆 点 或 星 形 , 它 并 不 支 
持 文本 模型 ,其 独特 的 功能 是 存储 用 户 密码 。 


4.5.3 TextBox 5 RichTextBox 


TextBox 5 RichTextBox 用 法 相似 ,但 是 TextBox 不 支持 富 文本 ,是 对 RichTextBox 
的 编辑 功能 的 简化 。 创 建 TextBox 的 XAML 代码 如 下 。 

< TextBox AcceptsReturn = "True" TextWrapping - "Wrap" FontSize = "34" 

Text = "Hello TextBox"/» 

运行 上 述 代码 ,页 面 显示 效果 如 图 4. 30 所 示 。 其 中 “TextWrapping 一 "Wrap"” 实 现 
换行 输入 功能 “AcceptsReturn 王 "True"” 实 现 换行 输出 功能 。 

RichTextBox 是 功能 最 强大 的 文本 编辑 器 ,支持 大 约 84 个 命令 ,创建 RichTextBox 的 
XAML 代码 如 下 。 


<! -一 保留 Window 代码 部 分 --> 
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< RichTextBox > 
< FlowDocument FontSize = "34"> 
< Paragraph> Hello RichTextBox </Paragraph> 
</FlowDocument > 
</RichTextBox > 
</Window> 


运行 上 述 代码 ,页 面 显示 效果 如 图 4. 31 所 示 。RichTextBox 是 支持 流 文本 模型 ,是 
FlowDocument 编辑 器 。 它 支持 常见 的 编辑 命令 及 常用 的 快捷 键 (如 Ctrl +A, Ctrl +C, 
Ctrl 十 Z 等 ) 。 








E3 Mainwindow MainWindow 


Hello TextBox Hello RichTextBox 


图 4. 30 TextBox 实现 文本 换行 输入 4.31 RichTextBox 编辑 器 























4.5.4 InkCanvas 


InkCanvas 是 针对 手写 笔迹 的 编辑 器 。 笔 迹 数据 比 富 文本 简单 ,可 视 做 一 个 数字 化 接 
收回。 数字 化 接收 器 的 功能 是 把 手写 的 模拟 信号 转化 为 数字 信号 。 笔 迹 基 础 数据 是 
Stroke, 它 定义 在 System. Windows. Ink 名 称 空 间 中 。 为 了 解 笔 迹 的 工作 机 制 ,在 InkCanvas 中 
的 XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 --> 
<Grid> 
< InkCanvas 
StrokeCollected = "InkProcess" 
Background = "Beige"/» 
< Canvas Name = "layover"»«/Canvas > 
«/Grid» 
</Window> 


上 述 代码 中 ,InkCanvas 控件 的 InkProcess 事件 的 后 台 CS 代码 如 下 。 


private void InkProcess(object sender, InkCanvasStrokeCollectedEventArgs e) 
{ 
layover.Children.Clear(); 
Brush fill = new SolidColorBrush(Color.FromArgb(150, 200, 0, 0)); 
foreach (StylusPoint pt in e. Stroke. StylusPoints) 
{ 
double markerSize = pt.PressureFactor * 35; 
Ellipse marker = new Ellipse(); 
Canvas. SetLeft(marker, pt.X- markerSize/2); 
Canvas. SetLeft(marker, pt. Y- markerSize/2); 
marker. Width = marker. Height = markerSize; 
marker. Fill = fill; 
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layover. Children. Add(marker); 


} 


运行 完整 的 InkCanvas 代码 ,接收 手写 数据 后 ,页 面 显示 效果 如 图 4. 32 所 示 。 对 了 
InkCanvas 还 支持 笔 势 ,作为 笔 势 识别 器 可 以 分 析 笔 迹 数据 。 启 用 笔 势 有 两 个 步骤 。 第 一 
步 , 设 置 InkCanvas 的 EditingMode 属性 值 为 InkAndGesture; 第 二 步 , 通 知 笔 势 识别 器 查 
找 笔 势 时 ,需要 调用 InkCanvas 上 的 SetEnabledGestures。XAML 代码 如 下 。 
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4.32 InkCanvas 工作 对 象 模型 


< StackPanel > 
< InkCanvas Height = "150" Name = "_ink" 
Gesture = "InkGesture" EditingMode = "InkAndGesture"> 
</InkCanvas > 
< ListBox Name = "_look"></ListBox > 
«/StackPanel > 


InkCanvas 控件 后 台 的 CS 代码 如 下 。 


public MainWindow() 
{ 

InitializeComponent(); 

. ink. SetEnabledGestures(new ApplicationGesture[]( 

ApplicationGesture. AllGestures,]); 

) 
private void InkGesture(object sender, InkCanvasGestureEventArgs e) 
{ 

. look. Items. Add(e. GetGestureRecognitionResults()[0].ApplicationGesture); 
) 


运行 这 个 完整 的 InkCanvas 的 手势 识别 程序 , 写 下 笔 势 ,如 图 4. 33 所 示 。 
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4.33 InkCanvas 笔 势 识别 器 


4.6 列表 控件 


在 应 用 程序 中 ,常见 到 显示 数据 的 列表 。WPF 中 列表 控件 的 主要 功能 是 显示 数据 和 选 
择 数 据 。WPF 中 有 4 个 标准 列表 控件 , 即 ListBox, ComboBox, ListView 和 TreeView。 列 
表 控件 通过 Items 和 ItemsSource 两 属性 添加 数据 源 。Items 逐条 添加 数据 源 到 列表 控件 
中 ,代码 如 下 。 

ListBox list = new ListBox(); 


list. Items. Add("one"); 
list. Items. Add(" two"); 


ItemsSource 是 以 集合 的 方式 添加 数据 源 到 列表 控件 中 ,代码 如 下 。 


string[] items = new string[] ("one", "two" }; 
ListBox listl = new ListBox(); 
listl.ItemsSource = items; 


对 比 添加 数据 源 的 两 种 方法 ,使 用 ItemsSource 可 在 列表 控件 外 部 维护 数据 。 
4.6.1 ListBox 和 ComboBox 


尽管 ListBox 和 ComboBox 的 显示 页 面 差 别 很 大 ,但 从 对 象 模型 的 角度 看 ,两 者 又 很 相 
似 。 故 把 两 个 控件 放 到 一 起 ,对 比 学 习 。 

由 WPF 控件 内 容 模型 和 模板 的 新 理念 可 知 ,可 以 把 任意 类 型 的 数据 放 到 列表 控件 中 ， 
并 用 模板 来 改变 控件 的 外 观 。 

为 了 更 好 地 理解 ListBox 的 应 用 场合 .选取 Windows 7 控制 面板 如 图 4. 34 所 示 。 

图 4.34 中 的 控制 面板 就 是 使 用 Grid 布局 的 ListBox 设计 而 成 的 。 下 面 用 自 定 义 列 表 
的 控件 ItemsPanel 创建 新 的 布局 模板 ,用 于 显示 列表 中 的 项 目 。XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 ——» 
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图 4.34 Windows 7 控制 面板 


<Grid> 
<ListBox> 
< ListBox. ItemsPanel > 
< ItensPanelTenplate- 
< UniformGrid Columns = "4"></UniformGrid> 
</ItemsPanelTemplate > 

</ListBox. ItemsPanel > 

< ListBoxItem> Iteml </ListBoxItem > 
< ListBoxItem > Item2 </ListBoxItem > 
<ListBoxItem > Item3 </ListBoxItem > 
< ListBoxItem» Item4 </ListBoxItem > 
< ListBoxItem > Item5 </ListBoxItem > 
< ListBoxItem > Item6 </ListBoxItem > 
< ListBoxItem> Item7 </ListBoxItem > 
<ListBoxItem > Item8 </ListBoxItem > 
<ListBoxItem > Item9 </ListBoxItem > 
<ListBoxItem> Item10 </ListBoxItem > 
<ListBoxItem> Itemll </ListBoxItem > 
<ListBoxItem > Item12 </ListBoxItem > 

</ListBox > 
</Grid> 
</Window> 


运行 上 述 代码 , 页面 显 示 效 果 如 图 4. 35 所 示 。 使 用 UniformGrid 布局 列表 框 ， 
Columns 属性 设置 列表 的 列 数 。 

ComboBox 从 用 户 的 角度 来 看 ,就 是 由 一 个 文本 输入 控件 和 一 个 下 拉 菜 单 组 成 的 ,用 户 
可 以 从 一 个 预先 定义 的 列表 中 选择 一 个 选项 ,也 可 以 直接 在 文本 框 中 输入 文本 。 它 占据 的 
屏幕 空间 比 ListBox 更 小 ,而 且 数据 项 可 以 隐藏 。 创 建 ComboBox 的 XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 --> 
< StackPanel Margin = "10"> 
< ComboBox> 
< ComboBoxItem > ComboBox Iteml </ComboBoxItem> 
< ComboBoxItem IsSelected = "True"> ComboBox Item2 </ComboBoxItem > 
< ComboBoxItem > ComboBox Item3 «/ComboBoxItem > 
< ComboBoxItem > ComboBox Item4 </ComboBoxItem > 
< ComboBoxItem > ComboBox Item5 </ComboBoxItem > 
</ComboBox > 
</StackPanel > 
</Window> 


运行 上 述 代 码 , 页 面 显示 效果 如 图 4. 36 所 示 。“IsSelected 一 "True"” 所 在 的 位 置 表示 
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当前 ComboBox 的 内 容 是 程序 运行 后 的 默认 项 。 
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4.35 ListBox 控件 图 4.36 ComboBox 控件 


4.6.2 ListView 


ListView 在 ListBox 的 基础 上 又 有 新 的 特性 , 它 可 以 看 作 可 视 化 的 网 格 控件 ,所 以 在 使 
用 ListView 时 ,要 把 ListView. View 属性 设置 为 GridView。 使 用 ListView 显示 含有 表 头 
为 姓名 .性别 和 房间 名 的 表格 。XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 --> 
Title = "大 观 园 " Height = "350" Width = "525"> 
<Grid> 
< ListView Name = "lv" ItemsSource = "(Binding)"» 
€ ListView. View? 
< GridView AllowsColumnReorder = "True" 
< GridViewColumn Width = "50" Header = "lk 名 " 
DisplayMemberBinding = "(Binding Path = Name)" /> 
< GridViewColumn Width = "50" Header = "性 5i" 
DisplayMemberBinding = "(Binding Path = Gender}"/> 
< GridViewColumn Width = "55" Header = "房间 名 " 
DisplayMemberBinding = "(Binding Path = RoomName]" /> 
«/GridView» 
«/ListView. View? 
«/ListView» 
«/Grid» 
«/Window» 


在 后 台 添加 数据 项 的 CS 代码 如 下 。 


using System. Collections. ObjectModel; // 新 增添 引用 

public ObservableCollection < object > ObservableObj; 

public MainWindow() 

{ 
InitializeComponent(); 
ObservableObj = new ObservableCollection «object >(); 
ObservableObj. Add(new ( Name = "i45: E", Gender = "Jj", RoonName = " 怡 红 院 "}); 
ObservableObj.Add(new ( Name = "kE", Gender = "*t", RoonName = "潇湘 馆 "}); 
ObservableObj.Add(new ( Name = "PE", Gender = "Ar", RoomName = "dioe Dc"); 
ObservableObj. Add(new ( Name = "MÆ", Gender = "fr", RoomName = "338%" )) ; 
ObservableObj.Add(new ( Name = "H {R f£", Gender = "Jr", RoomName = "fA gg" )); 
ObservableObj. Add(new ( Name = "i15 f$", Gender = "4", RoomName = "RFI" }); 
ObservableObj.Add(new ( Name = "b E", Gender = "Ar", RoomName = "JE AE" }); 
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Observable0bj. Add(new ( Name = " 李 织 "，Gender = "4", RoomName = "fih" )); 
lv.DataContext = ObservableObj; 
} 


运行 完整 的 代码 ,页 面 显 示 效 果 如 图 4. 37 所 示 。CS 代码 中 使 用 Add() 方 法 逐条 添加 
数据 ,较为 烦琐 。 通常 数据 与 ListView 绑 定 是 常用 的 方法 ,其 XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 --> 
Title = "ListViewDataBindingExample" Height = "350" Width = "525"> 
<Grid> 
« ListView ItemsSource = "(x:Static Fonts. SystemFontFamilies}" Margin = "0,0,0, - 12"> 
<ListView. View> 
<GridView> 
< GridViewColumn Header = "Name" 
DisplayMemberBinding = "(Binding Source]"/» 
< GridViewColumn Header = "Line Spacing" 
DisplayMemberBinding = "(Binding LineSpacing]"/» 
< GridViewColumn Header = "Demo" 
< GridViewColumn. CellTemplate > 
< DataTemplate > 
< TextBlock FontFamily = "(Binding)" FontSize = "16" 
Text = "I am a GridViewColumn"/> 
</DataTemplate > 
</GridViewColumn. CellTemplate > 
</GridViewColumn > 
</GridView> 
</ListView. View> 
</ListView> 
</Grid> 

</Window> 


运行 上 述 代码 ,页 面 显示 效果 如 图 4. 38 所 示 。 其 中 ,列表 中 的 Name 与 Line Spacing 
使 用 的 是 绑 定 的 系统 值 ,Demo 使 用 的 是 数据 模板 。 





姓 名 性 别 房间 名 














男 Name Line Spacing Demo “< 

女 Arial 114990234375 | am a GridViewColumn 

: Batang 1.1484375 Iam a GridView Column 

& BatangChe 11484375 I am a GridViewColumn 

& Gungsuh 1.1484375 Iam a GridViewColumn 

& GungsuhChe 1.1484375 I am a GridViewColumn 

E: Courier New 1.1328125 I am a GridViewColumn 
4.37 ListView 控件 图 4.38 具有 数据 绑 定 的 ListView 控件 


4.6.3 TreeView 


TreeView 可 以 视 为 列表 框 的 嵌 套 ,也 就 是 说 列表 框 中 的 条 目 上 还 是 一 个 列表 框 。 
TreeView 把 每 个 TreeView 对 象 看 作 一 个 控件 。XAML 创建 TreeView 的 代码 如 下 。 
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<! -- 保留 Window 代码 部 分 -一 > 
<Grid> 
< TreeView> 
< TreeViewItem Header = "Name"> 
< TreeViewItem Header = "Tom" /> 
< TreeViewItem Header = "Alice"/> 
</TreeViewItem > 
< TreeViewItem Header = "Hobby" 
< TreeViewItem Header = "Sing"/> 
< TreeViewItem Header = "Draw" /> 
</TreeViewItem > 
</TreeView> 
</Grid> 
</Window> 


运行 上 述 代码 ,页 面 显示 效果 如 图 4.39 所 示 。 和 其 他 列表 控件 使 用 相似 ,直接 添加 条 
目 到 Items 属性 上 。 
给 TreeView 添加 条 目 ,通过 Add() 方 法 实现 的 CS 代码 如 下 。 


public MainWindow() 
{ 
InitializeComponent(); 
TreeViewItem iteml = new TreeViewItem() ( Header = "北京 " ); 
TreeViewItem item11 = new TreeViewItem() ( Header = "UE" ); 
item11. Items. Add(" 南 大 门 "); 
item11. Items. Add(" 神 武 门 "); 
item11. Items. Add(" 东 华 门 "); 
itemll. Items. Add(" 西 华 门 "); 
item1. Items. Add( item11); 
iteml. Items. Add(" i fl pd " ) ; 
itenl. Items. Add(" JK 3: 7j") ; 
tw. Items. Add(iteml); 
) 


在 XAML 代码 中 , 写 人 < TreeView Name— " tw"» «/TreeView > 语句 后 再 运行 代码 ， 
页 面 显示 效果 如 图 4. 40 所 示 。 请 读者 在 图 4. 39 页 面 的 基础 上 ,添加 Checkbox 控件 后 ,做 
出 如 图 4.41 所 示 的 页 面 。 




















图 4.39 TreeView 控件 图 4. 40 CS 编写 TreeViewItem 图 4.41 带 Checkbox 的 TreeView 
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4.7 构建 控件 


WPF 的 控件 模型 中 采用 元 素 合成 的 思想 ,可 以 用 较 小 的 控件 构建 较 大 的 控件 ,在 此 来 
了 解 系统 为 构建 控件 所 提供 的 服务 ,哪些 服务 适用 于 构建 自 定义 控件 。 其 中 构建 控件 的 较 
小 组 件 都 在 System. Windows. Controls. Primitives 名 称 空间 下 。 


4.7.1 ToolTip 


在 WPF 中 ,ToolTip 既 可 以 表示 工具 提示 属性 ,还 可 以 表示 一 个 类 。 当 它 作 为 Button 
控件 属性 时 ,在 XAML 代码 中 ,设置 ToolTip 的 代码 如 下 。 


< Button ToolTip = "please click to enter next step"></Button> 
在 ToolTip 类 中 ,可 以 添加 任何 的 控件 来 修饰 这 个 控件 的 ToolTip, 代 码 如 下 。 
<! -- 保留 Window 代码 部 分 --> 


<Grid> 
< Button Height = "25" Content = "工具 提示 演示 " HorizontalAlignment = "Left"> 
< Button. ToolTip> 
< ToolTip Background = "Green" Foreground = "White" HasDropShadow = "False" 
Placement = "MousePoint" > 
<TextBlock Margin = "5"> ToolTip 类 的 使 用 方法 </TextBlock > 
</ToolTip> 
</Button. ToolTip> 
</Button> 
</Grid> 
</Window> 


运行 上 述 代码 ,页 面 显示 效果 如 图 4. 42 所 示 。 其 中 ,ToolTip 使 用 TextBlock 作为 工 
具 提 示 控 件 。 还 可 以 使 用 ToolTipService 显示 工具 提示 信息 ,XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 --> 
Title= "MainWindow" Height = "350" Width= "525" 
ToolTipService. InitialShowDelay = "0" ToolTipService. ShowDuration = "99999"> 
<Window. ToolTip> 
< ToolTip x:Name = "_tooltip" Placement = "RelativePoint" VerticalOffset = "15"> 
</ToolTip> 
</Window. ToolTip> 
< UniformGrid Rows = "2" Columns = "3"> 
< Button Margin = "6"> one </Button > 
« Button Margin = "6"> two </Button> 
« Button Margin = "6"> three </Button > 
« Button Margin = "6"> four </Button > 
« Button Margin = "6"> five </Button > 
< Button Margin = "6"> six «/Button» 
«/UniformGrid- 
</Window > 


后 台 CS 代码 如 下 。 
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public partial class MainWindow : Window 


{ 
public MainWindow() 
{ 
InitializeComponent(); 
this.MouseMove += MainWindow MouseMove; 
} 
void MainWindow MouseMove(object sender, MouseEventArgs e) 
1 
PointHitTestResult hit = VisualTreeHelper.HitTest(this, e.GetPosition(this)) as 
PointHitTestResult; 
if (hit!= null && hit. VisualHit!- null) 
{ 
_tooltip. Content = hit. VisualHit. ToString(); 
_tooltip. PlacementRectangle = new Rect(e. GetPosition(this), new Size(0, 0)); 
} 
} 
} 


MainWindow [scel 








wo |[ thee | 
Microsoft.Windows.Themes.ButtonChrome 





























图 4.42 ToolTip 演示 图 4.43  ToolTipService 显示 工具 提示 信息 


4.7.2 Thumb 


1. 拖 动 控件 

Thumb 是 拖 动 标 , 指 示 一 个 能 被 移动 的 区 域 。Thumb 作为 拖 忠 对 象 ,一 般 设置 在 
Canvas 容器 内 。 实 现 拖 电 只 需 设 置 DragDelta 和 DragStarted 两 个 事件 即 可 ,其 中 ， 
DragStarted 设置 Thumb 拖 动 开始 状态 。 


<! -- (REI Window 代码 部 分 --> 
Title- " 窗 体 拖 动 " Height = "350" Width = "525"> 
< Canvas Background = "LightGreen"» 
< Thumb 
Name = "_thum1" Width = "20" Height = "15" Background = "Purple" 
Canvas. Top = "101" Canvas. Left = "116" 
DragStarted = "ThumbStart" DragDelta = "ThumbMove"> 
</Thumb> 
</Canvas > 
</Window> 


编写 DragStarted 表示 拖 动 开始 事件 和 DragDelta 的 拖 动 事件 ,CS 代码 如 下 。 


public partial class MainWindow : Window 


mam omm) 





{ 
public MainWindow() 
{ 
InitializeComponent(); 
} 
double startLeft; 
double startTop; 
private void ThumbStart(object sender, 
System. Windows. Controls. Primitives. DragStartedEventArgs e) 
{ 
_startLeft = Canvas.GetLeft( thuml); 
_startTop = Canvas.GetTop( thuml); 
} 
private void ThumbMove(object sender, 
System. Windows. Controls. Primitives. DragDeltaEventArgs e) 
{ 
double left = _startTop + e. HorizontalChange; 
double top = _startTop + e. VerticalChange; 
Canvas. SetLeft(_thum1, left ); 
Canvas. SetTop(_thum1, top); 
) 
) 


运行 完整 的 代码 ,页 面 显 示 效 果 如 图 4. 44 所 示 。 
DragDelta 为 拖 动 事件 , 其 中 拖 动 事件 参数 是 System 
. Windows. Controls. Primitives. DragDeltaEventArgs。 获 
得 其 拖 动 从 开始 发 生 到 当前 位 移 的 水 平方 向 变化 数值 是 通 
过 e. HorizontalChange, 获得 垂直 方向 变化 数值 是 通过 
e. VerticalChange, 它 们 与 显示 坐标 一 致 。 图 4.44 Thumb 页 面 效果 

2. 拖 动 窗口 

在 窗 体 的 操作 中 , 当 把 鼠标 放 在 窗口 的 标题 栏 上 按 下 就 可 以 拖 动 窗 体 。 在 此 ,要 在 窗口 
的 全 部 位 置 或 特定 位 置 按 下 鼠标 左 键 实现 拖 动 。 在 WinForm 中 ,要 获取 鼠标 的 位 置信 息 ， 
从 而 设置 窗 体 的 位 置 。 当 然 , WPF 也 可 以 采用 WinForm 类 似 的 方法 ,但 是 使 用 Thumb 
时 ,操作 方法 变 得 简捷 了 许多 。 

实现 拖 动 窗口 功能 ,使 用 Grid 布局 窗口 ,其 Grid 内 部 放置 一 个 Canvas. XAML 代码 
如 下 。 

<! -- 保留 Window 代码 部 分 --> 

Title = " 窗 体 拖 动 " Height = "350" Width = "525"> 

< Grid Background = "LightGreen" 

MouseLeftButtonDown = "Grid_MouseLeftButtonDown"> 
< Canvas Name = "Canvas1" Background = "Purple" HorizontalAlignment = "Left" 
Margin = "110, 119, 0, 0" VerticalAlignment = "Top" Height = "55" Width = "83" 
MouseLeftButtonDown = "Canvas1_MouseLeftButtonDown"> 
</Canvas > 
</Grid> 
</Window> 
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要 在 Grid 或 Ganvas 内 按 下 鼠标 左 键 实现 窗 体 拖 动 ,CS 代码 如 下 。 


public partial class MainWindow : Window 
{ 
public MainWindow() 
{ 
InitializeComponent(); 
) 
private void Canvasl MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
{ 
base. DragMove( ) ; 
} 
private void Grid MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
{ 
base. DragMove() ; 
} 
} 


运行 完整 的 代码 ,页 面 显 示 效 果 如 图 4. 45 所 示 。DragMove() 方 法 仅 用 来 实现 窗 体 的 
拖 动 ,在 窗 体 中 按 下 鼠标 左 键 实现 “ 窗 体 拖 动 ” 效 果 。 











4.45 Thumb 拖 动 窗 体 的 页 面 效果 


4.7.3 Border 


Border( 边 框 ) 是 一 个 装饰 性 控件 ,可 把 Border 看 作 能 包含 子 对 象 的 矩形 。 在 边框 四 周 
设置 不 同 的 厚度 和 转角 半径 。 设 置 不 同样 式 的 边框 ,XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 --> 


< Canvas > 

« Border 
Canvas. Left = "12" Canvas. Top = "5" 
BorderThickness = "5" 
CornerRadius = "0" 
BorderBrush = "Green" Padding = "10"> 
< TextBox > WPF Border «/TextBox > 

</Border > 

< Border 


Canvas. Left = "135" Canvas. Top = "5" 
BorderThickness = "5,3,5,3" 


第 4 章 控件 





CornerRadius = "0,18,0,18" 
BorderBrush = "Green" Padding = "10"> 
< TextBox > WPF Border </TextBox > 


</Border > 
< Border 


Canvas. Left = "249" Canvas. Top = "5" 
BorderThickness - "5" 

CornerRadius - "8" 

BorderBrush = "Green" Padding = "10"» 
< TextBox > WPF Border </TextBox > 


</Border > 
< Border 


Canvas. Left = "365" Canvas. Top = "5" 
BorderThickness = "15,5,15,5" 
CornerRadius = "16" 

BorderBrush = "Green" Padding = "10"> 
< TextBox > WPF Border </TextBox > 


«/Border > 


«/Canvas > 
</Window> 


运行 上 述 代码 ,页 面 显 示 效 果 如 图 4. 46 所 示 。 因 为 大 部 分 呈现 控件 (Ellipse、 Rectangle 
等 ) 不 支持 子 对 象 ,所 以 运用 Border 控件 绘制 边框 各 种 样式 。 尽 管 在 Border 中 只 能 有 一 个 
子 控件 ,但 它 的 子 控件 中 可 以 包含 多 个 子 控件 。 本 例 中 用 到 的 Border 属性 的 含义 介绍 


如 下 。 


BorderBrush 用 于 设置 边框 颜色 ; BorderThickness 用 于 设置 边框 的 宽度 ; CornerRadius 用 
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图 4.46 不 同 边缘 厚度 及 转角 半径 的 Border 

















于 设置 每 一 个 角 圆 的 弧度 ; Padding 用 于 设置 Border 中 的 内 容 与 边框 之 间 的 间隔 。 


4.7.4 Popup 


1. 弹出 框 


WPF 的 Popup( 弹 出 框 ) 用 于 创建 浮动 窗口 ,创建 弹出 框 的 XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 --> 
< StackPanel > 
< Button Click = "PopupDisplay"> Popup </Button > 
< Popup Name = "_popup" PopupAnimation = "Fade" Placement = "Mouse" > 


« Button? Hello, I am a WPF Popup </Button > 


</Popup> 
</StackPanel > 


</Window> 
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在 CS 代码 中 添加 事件 如 下 。 


private void PopupDisplay(object sender, RoutedEventArgs e) 
{ 

—popup. IsOpen -! popup. IsOpen; 
} 


运行 上 述 代 码 ,页 面 显示 效果 如 图 4. 47 所 示 。 代 

















E3 MainWindow 
码 中 的 “Placement 二 "Mouse"” 是 指 按 下 鼠标 ,响应 的 
行为 。 CT i 
2. 弹出 式 菜单 — 
在 4.2.1 节 中 , 提 到 还 有 一 种 菜单 称 为 上 下 文 菜 E447 Popup UR IEM 


JÉ (ContextMenu) ,又 称 为 弹出 式 菜 单 , 因 为 弹出 式 菜 
单 与 弹出 框 在 显示 页 面 上 有 一 定 的 相似 性 , 故 把 ContextMenu 放 在 了 本 节 来 学 习 。 创 建 弹 
出 式 菜 单 的 XAML 代码 如 下 。 


< Grid Height = "311" Width = "498"> 
< Button x:Name = "cmd" Content = "Popup" Margin = "12, 12, 401, 271"> 
< Button. ContextMenu > 
< ContextMenu x: Name = "menu"> 
< MenuItem Header = "MenuItem0"> 
< MenuItem Header = "MenuItem00"/> 
< MenuItem Header = "MenuItem01"/> 
< MenuItem Header = "MenuItem02"/> 
</MenuItem> 
< MenuItem Header = "MenuItem1"/> 
</ContextMenu> 
</Button. ContextMenu > 
</Button > 
</Grid> 
</Window > 


在 CS 代码 中 添加 窗 体 加 载 时 ,响应 的 事件 如 下 。 


public partial class MainWindow : Window 
{ 
public MainWindow() 


{ 
InitializeComponent(); 
) 
private void Window Loaded(object sender, RoutedEventArgs e) 
1 
cmd. Click += (obj, args) = »(menu. IsOpen = true; }; 
) 


} 


运行 上 述 代码 ,页面 显 示 效 果 如 图 4. 48 所 示 , 在 Button 上 右 击 ,弹出 一 级 菜单 ,将 鼠标 
放 在 一 级 菜单 上 显示 二 级 菜单 。 
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图 4.48 ContextMenu 显示 页 面 


4.7.5 ScrollViewer 


ScrollViewer( 滚 动 查看 器 ) 可 用 在 需要 滚动 的 任何 位 置 。 使 用 查看 器 的 XAML 代码 
如 下 。 


< ScrollViewer 
HorizontalScrollBarVisibility = "Auto" 
VerticalScrollBarVisibility = "Auto" 
«Grid» 
< Grid. RowDef initions > 
< RowDef inition Height = "Auto" /» 
< RowDef inition Height = "Auto" /» 
< RowDef inition Height = "Auto" /» 
«/Grid. RowDefinitions > 
< TextBox Margin = "3" Grid. Row = "0" Name = "" toAdd"/» 
< Button Margin = "3" Grid. Row = "1" Click = "AddItem"» Add Name </Button > 
< ListBox Margin = "3" Grid.Row- "2" Name-" list"/» 
«/Grid» 
«/ScrollViewer > 
</Window> 


在 CS 代码 中 ,为 ListBox 添加 数据 的 方法 如 下 。 


private void AddItem( object sender, RoutedEventArgs e) 


t 
_list. Items. Add(_toAdd. Text); 


} 


运行 上 述 代 码 ,页 面 显示 效果 如 图 4.49 所 示 。 因 为 列表 框 本 身 就 带 有 了 滚动 查看 器 ， 
故 页 面 效果 与 预期 不 符 ,ScrollViewer 对 布局 影响 很 大 ,所 以 需 多 做 案例 ,在 充分 理解 的 基 
础 上 , 善 用 它 。 若 想 解 决 上 述 问题 ,还 可 以 使 用 Viewbox 控件 。 


4.7.6  Viewbox 


Viewbox( 视 图 框 ) 带 有 一 个 单独 子 对 象 ,内 容 可 以 随 着 控件 中 的 文字 大 小 进行 缩放 。 
创建 Viewbox 的 XAML 代码 如 下 。 
<Grid> 


< Viewbox VerticalAlignment = "Top"> 
<TextBlock Text = "WPF Viewbox. TextBlock" VerticalAlignment = "Top"/> 
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</Viewbox> 
< Viewbox VerticalAlignment = "Bottom"> 
< Button Content = "WPF Viewbox. Button" VerticalAlignment = "Bottom"/> 
</Viewbox> 
</Grid> 


ja; E XR ICD. 页 面 显示 效果 如 图 4. 50 所 示 。Grid 中 包含 了 两 个 Viewbox, 每 个 
Viewbox 下 包含 一 个 子 对 象 。 












E MainWindow 


PF Viewbox.TextBloc 


[WPF Viewbox.Button| 


4.49  ScrollViewer 显示 页 面 图 4. 50 Viewbox 显示 页 面 
































4.8 日 期 控件 


WPF 添加 了 Calendar 和 DatePicker 两 个 日 期 控件 ,这 两 个 控件 为 用 户 提 供 日 期 选择 。 
Calendar 控件 显示 日 历 与 Windows 操作 系统 中 的 日 历 相似 。DatePicker 控件 与 简单 
的 文本 框 相似 ,占用 的 空间 少 。Calendar 和 DatePicker 公共 属性 如 表 4. 4 所 示 。 


表 4.4 Calendar 和 DatePicker 的 公共 属性 


属 性 名 属性 描述 
DisplayDateStart 和 DisplayDateEnd 日 期 显示 的 起 始 时 间 和 结束 时 间 
BlacboutDoics 保存 日 历 中 将 被 禁用 或 不 能 选择 的 日 期 集合 。BlackoutDates 
.AddDatesInPast() 方 法 : 阻止 选择 被 禁用 的 日 期 
SelectedDate 为 DateTime 对 象 提供 选择 的 日 期 ,没有 日 期 被 选中 时 使 用 null 
使 用 DateTime 对 象 确定 日 历 视 图 中 最 初 显 示 的 日 期 。 若 
DisplayDate 和 SelectedDate 均 为 空 ,使 用 当前 日 期 














DisplayDate 











FirstDayOfWeek 默认 情况 下 ,日历 每 周 的 第 一 天 为 周 日 
IsTodayHighlighted 确定 日 历 视 图 是 否 通过 突出 显示 当前 日 期 


4.8.1 Calendar 


Calendar( 日 历 ) 控 件 除 了 前 面 的 公共 属性 外 ,还 有 其 独 有 的 DisplayMode 属性 ,用 来 调 
整 日 历 显示 模式 ,分 为 Year、Month 和 Decade 3 种 。 默 认 情 况 下 为 Month 模式 ,显示 一 个 
月 份 , 通 过 单 击 箭头 按钮 ,选择 月 份 。 设 置 这 3 种 模式 ,其 效果 分 别 如 图 4. 51 一 图 4. 53 
所 示 。 
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图 4.51 以 月 为 单位 的 日 历 图 4.52 以 日 为 单位 的 日 历 


设置 Calendar 相关 属性 , 自 定义 日 期 样式 ,XAML 代码 如 下 。 


<! -一 保留 Window 代码 部 分 --> 
Title = "MainWindow" Height = "350" Width = "525"> 

<Window. Resources> 

< Style TargetType = "CalendarDayButton" x:Key = "CalendarDayBtnStyle"> 

< Setter Property = "Background"> 
< Setter. Value? 
< LinearGradientBrush StartPoint = "0,0" EndPoint = "1,1"> 
< GradientStop Color = "White" Offset = "0"/> 
< GradientStop Color = "LightBlue" Offset = "1"/> 
</LinearGradientBrush> 
</Setter. Value» 
</Setter > 

</Style> 
</Window. Resources > 
<Grid> 

< Calendar Margin = "0,50,0,0" Name = "calendarCtl" DisplayMode = "Month" 

FirstDayOfWeek = "Monday" FlowDirection = "RightToLeft" 
CalendarDayButtonStyle = "(StaticResource CalendarDayBtnStyle]"/» 
«/Grid» 
«/ Window? 


运行 上 述 代码 ,页 面 显示 效果 如 图 4. 54 Bros. AR Ip." FlowDirection — " RightToLeft "" 
查看 日 历 的 方向 (从 右 向 左 ),“FirstDayOfWeek 二 "Monday" ”设置 星 期 一 是 每 行 的 开始 。 


E) MainWi... 





2010-2019 


2010 2011 


2014 2015 


DII CIE 
Ben ll 


2018 2019 











图 4.53 ”以 年 为 单位 的 日 历 图 4.54 日 期 按键 自 定义 样式 


4.8.2 DatePicker 
DatePicker( 日 期 选择 器 ) 控 件 , 与 Calendar 相 比 ,DatePicker 多 出 了 一 个 TextBox 用 来 
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提取 从 Calendar 中 选择 的 日 期 。 该 文本 框 以 长 日 期 格式 或 短 日 期 格式 保存 一 个 日 期 字符 
P. Mih DatePicker 控件 的 下 拉 箭 头 , 会 弹出 与 Calendar 控件 相同 的 日 历 视 图 ,看 起 来 像 
下 拉 组 合 框 。 

除了 上 面 的 公有 属性 外 ,其 特有 的 属性 是 IsDropDownOpen, 表 示 是 否 打 开 DatePicker 
控件 中 的 下 拉 日 历 视图 ; SelectedDateFormat 是 日 期 格式 。 

设置 DatePicker 的 SelectedDate 属性 为 当前 日 期 ,XAML 代码 如 下 。 





<! -- 保留 Window 代码 部 分 --> 
xmlns:sys = "clr ~ namespace:System;assembly = mscorlib" 
Title = "MainWindow" Height = "350" Width= "525"> 





<Grid> ia: "i 
< DatePicker SelectedDate = " {x: Static sys:DateTime ARCA $ 
.Now}" /> 8 9 10 i 
«/Grid» ide B 
«/ Window» 232 bA 
运行 上 述 代 码 ,页 面 显示 效果 如 图 4. 55 所 示 。 需 要 注意 
的 是 ,XAML 代码 中 新 添加 的 名 称 空间 。 图 4.55 DatePicker 默认 样式 


4.9 按 钮 


对 于 按钮 ,最 熟悉 的 就 是 Button, 除 此 之 外 ,还 有 CheckButton 和 RadioButton, 

按钮 就 是 响应 用 户 单 击 的 控件 ,其 中 按钮 最 常用 的 事件 就 是 Click, 它 继承 自 ButtonBase。 
Button 实现 了 标准 按钮 的 默认 外 观 。CheckButton 和 RadioButton 是 用 于 切换 开关 的 按钮 , 支 
持 IsChecked( 数 据 模型 ) 和 IsThreeState( 交 互 模型 ) 属 性 。 当 IsThreeState 为 True 时 , 复 选 框 
中 的 值 可 从 Checked、Unchecked 和 Indeterminate 这 3 个 值 中 选择 。 

设置 它们 的 属性 ,对 比 三 者 的 外 观 ,XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 --> 
<Grid> 
< Button Margin = "12,21,0,236" Height = "60" 
HorizontalAlignment = "Left" Width = "142"» Button </Button > 
< CheckBox IsChecked = " (x: Null)" 
Margin = "174,21,210,0" Width- "117" Height = "15" 
VerticalAlignment = "Top"» Check Null «/CheckBox > 
< CheckBox IsChecked = "True" 
Margin = "177, 40, 210, 256"> Check True «/CheckBox > 
< CheckBox IsChecked = "False" 
Margin "177,60, 210, 236"» Check False «/CheckBox > 
< RadioButton IsChecked = "(x:Null)" 
Margin = "321, 21, 12,275"> RadioButton Null </RadioButton > 
< RadioButton IsChecked = "True" 
Margin = "321, 40, 12, 256"> RadioButton True </RadioButton > 
< RadioButton IsChecked = "False" 
Margin = "321, 60, 12, 236"> RadioButton False </RadioButton > 
</Grid> 
</Window> 
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运行 上 述 代码 ,页 面 显示 效果 如 图 4. 56 所 示 。 这 些 控件 看 上 去 就 像 内 置 的 Windows 
控件 ,页 面 还 显示 了 其 所 有 交互 逻辑 。 对 于 这 些 基 础 的 控件 , WPF 就 是 一 个 内 置 控件 外 观 


的 完善 复制 。 
llli checkBox Null @ RadioButton Null 
Button. CheckBox True @ RadioButton True 
CheckBox False © RadioButton False 


图 4.56 几 种 按钮 的 默认 样式 


4.10 小 结 


本 章 介 绍 了 WPF 控件 的 新 概念 一 一 内 容 模型 和 模板 ,并 了 解 元 素 合成 、 富 内 容 和 简单 
的 编程 模型 的 控件 原则 。 在 此 基础 上 ,学 习 了 WPF 的 内 置 控件 。 
读者 学 完 前 4 章 , 已 经 掌握 了 有 关 WPF 基础 的 编程 内 容 和 界面 UI, 现 在 可 以 尝试 并 做 


出 赏心悦目 的 界面 。 从 第 5 章 将 开始 WPF 的 高 级 进 阶 。 
习题 与 实验 4 


1. 对 比 ListBox 和 ComboBox 的 异同 点 及 使 用 场景 。 
2. 设计 搜索 界面 ,在 页 面 底部 显示 日 期 及 时 间 , 如 图 4.57 所 示 。 











星期 三 2017 年 02 月 22 日 14:56:40 














4.57 搜索 页 面 


3. 用 Grid 布局 登录 页 面 , 拖 动 窗 体 右 下 角 调 整 窗 体 大 小 时 ,控件 会 随 着 窗 体 的 变化 ， 
按 比 例 调整 自身 的 大 小 。 页 面 显 示 效 果 如 图 4. 58 所 示 。 
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4.58 Grid 布局 登录 页 面 
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为 了 便于 读者 看 清楚 该 页 面 的 Grid 布局 方式 ,给 出 页 面 的 Logical Tree, 如 图 4. 59 
所 示 。 
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WPF Inspector 
~ O Application (20 
~ C] MainWindow (15 
~ MGrid 07 

~ fond 06) 
C ColumnDefinition (1 
[O ColumnDefinition (1 
E image (1 
~ 四 Grid 02 

国 ColumnDefinition (1) 





国 ColumnDefinition (1) 
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L8l Visual Tree |E Logical Tree 
图 4.59 Grid 布局 登录 页 面 的 逻辑 结构 
4. 设计 连连 看 游戏 的 页 面 如 图 4. 60 所 示 。 
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4.60 连连 看 布局 
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从 早期 的 控制 台 用 户 界面 (Control User Interface, CUD 到 图 形 用 户 界 面 (Graphic 
User Interface. GUD 的 发 展 ,计算 机 操作 系统 经 历 了 DOS (Disk Operating System) 到 
Windows 的 飞跃 , 带 给 用 户 良好 的 视觉 体验 。 在 Windows 操作 系统 的 图 形 用 户 界面 中 ,用 
户 通过 单 击 图 标 ,控件 启动 应 用 程序 ,把 这 动作 可 以 抽象 成 为 UI( 控 件 ) 驱 动 程序 的 思想 。 
在 WPF 中 ,实现 了 数据 驱动 UI 的 设计 思想 ,数据 成 为 应 用 程序 的 中 心 。 


5.1 数据 驱动 模型 


数据 模型 是 数据 源 与 数据 调用 者 之 间 的 约定 。 在 微软 发 展 历程 中 ,每 个 框架 都 具有 自 
己 的 数据 模型 。 例 如 ,Visual Basic 具有 DAO 数据 模型 (Data Access Objects ,数据 访问 对 
象 模型 )、.RDO(Remote Data Objects ,远程 数据 对 象 模 型 ) 和 ADOCActiveX Data Objects, 
ActiveX 数据 对 象 )。 在 . NET 中 ,把 API 的 数据 模型 作为 整个 框架 的 数据 模型 。 


5.1.1 数据 原则 


绝 大 多 数 应 用 程序 都 涉及 数据 的 创建 、 编 辑 和 显示 。 无 论 数据 是 以 数字 文本、 图 形 或 
3D 等 形式 出 现 , 应 用 程序 都 要 对 其 进行 操作 。 当 然 ,有 诸多 方式 来 表示 数据 。 在 . NET 中 
使 用 标准 的 数据 模型 增强 了 框架 处 理 数 据 的 能 力 。 

1. .NET 数据 模型 

. NET 数据 模型 支持 基础 的 数据 模型 ,还 支持 类 、 接 口 、 结 构 、 枚 举 和 委托 类 型 。 在 
. NET 中 ,System. Collection 的 接口 可 以 表示 列表 .如 IEnumerable、IList。 属 性 可 通过 内 
CLR 属性 来 定义 ,也 可 以 通过 ICustomTypeDescriptor 实现 。 现 在 新 的 数据 访问 技术 
LINQ(Language Intergrated Query, 语 言 集成 查询 ) 可 以 在 . NET 中 使 用 ,此 时 基础 数据 模 
型 保持 不 变 。 

.NET 数据 处 理 方式 有 ADO. NET( 位 于 System. Data 名 称 空间 )、XML( 位 于 System 
.Xml 名 称 空间 ) 数据 契约 (位 于 System. Runtime. Serialization 名 称 空间 ) 和 标记 (位 于 
System. Windows. Markup 名 称 空间 ) 。 众 多 的 . NET 数据 处 理 方 式 都 是 构建 在 基础 的 数 
据 处 理 模型 之 上 的 。 

因为 所 有 的 WPF 数据 操作 都 是 基于 基本 的 . NET 数据 模型 ,所 以 WPF 控件 可 以 接收 
任意 CLR 对 象 数据 。 


ListBox lb = new ListBox(); 
lb.ItemsSource = new string[] ("Hello","Good Morning", "Bye" }; 
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只 要 数据 通过 CLR 方式 访问 ,在 WPF 中 就 可 以 被 显示 。 

2. 绑 定 的 编程 方式 

WPF 最 显著 的 特点 就 是 绑 定 的 编程 方式 集成 到 整个 系统 。 例 如 ,控件 模板 是 模板 绑 
定 ; 资源 通过 绑 定 来 加 载 ; Button 控件 是 基于 内 容 模 型 ,使 用 数据 绑 定 。 

不 同 的 绑 定 名 称 对 应 不 同 的 绑 定 功能 与 场景 。 例 如 ,标准 绑 定 是 {Binding} 标 记 ; 模板 
绑 定 是 {TemplateBinding} 标 记 , 只 用 于 模板 的 上 下 文中 ,只 能 绑 定 到 模板 控件 的 属性 上 。 
大 多 数控 件 可 以 绑 定 到 模板 上 。 

绑 定 的 目的 是 当 数 据 发 生变 化 时 ,让 两 个 对 象 保持 同步 。 若 两 个 对 象 的 数据 类 型 不 能 
完全 匹配 , 则 需 数据 转换 。 

3. 数据 转换 

既然 在 WPF 中 , 绑 定 的 编程 方式 集成 到 整个 系统 。 这 意味 着 数据 无 论 绑 定 到 哪儿 ,都 
可 以 被 完全 转换 。WPF 对 数据 转换 的 规定 是 : 除了 绑 定 在 资源 的 数据 不 支持 转换 ,其 他 都 
可 以 被 完全 转换 。 因 为 资源 是 用 于 呈现 的 ,无 须 转换 。 

WPF 包含 值 转换 和 数据 模板 两 种 类 型 转换 。 其 中 , 值 转换 又 分 为 单 值 转换 接口 和 多 值 
转换 接口 。 数 据 模板 则 允许 控件 被 动态 地 创建 出 来 ,表示 数据 。 

因为 资源 是 程序 中 最 常见 的 数据 源 ,所 以 下 面 将 以 资源 开始 学 习 WPF 中 的 数据 。 


5.1.2 资源 


在 第 1 章 的 学 习 中 就 已 经 出 现 了 资源 。 在 计算 机 程序 中 ,只 要 是 对 程序 有 用 的 对 象 ,都 
可 以 统称 为 资源 。 

在 窗 体 中 的 Resources 属性 中 ,定义 一 个 笔 刷 ,设置 Button 中 的 背景 色 与 笔 刷 中 定义 
的 颜色 相同 ,XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 --> 
Title = "MainWindow" Height = "350" Width = "525"> 
« Window. Resources > 
< SolidColorBrush x:Key = "toColor"» LightGreen «/SolidColorBrush» 
«/ Window. Resources > 
< Button Background = " (StaticResource toColor]" 
Foreground = "Red" Margin = "30" > LightGreen Button </Button > 

«/Window» 


运行 上 述 代码 后 ,页 面 显示 效果 如 图 5. 1 所 示 。 由 于 笔 刷 为 LightGreen, Button 中 的 
Background 属性 以 静态 资源 的 方式 通过 键 名 调用 笔 刷 ,于 是 Button 的 背景 色 也 是 
LightGreen( 亮 绿色 ) 。 

接 下 来 在 资源 字典 (ResourceDictionary) 中 定义 TextBlock 的 Text 属性 绑 定 静态 资 
源 ,XAML 代码 如 下 。 


<! -一 保留 Window 代码 部 分 --> 
xmlns:sys = "clr- namespace:System;assembly = mscorlib" 
Title = "MainWindow” Height = "350" Width= "525"> 
« Window. Resources > 
< ResourceDictionary > 
<sys:String x:Key = "str"> 夜 来 风雨 声 , 花 落 知 多 少 .</sys:String> 


第 5 章 数据 人 87 





</ResourceDictionary> 
</Window. Resources > 
< StackPanel > 
< TextBlock Text = "(StaticResource ResourceKey = str]" 
Margin = "30" Width = "220" FontSize = "18"/» 
«/StackPanel > 
</Window > 


运行 上 述 代码 后 ,页面 显示 效果 如 图 5. 2 所 示 。 注 意 在 XAML 中 声明 了 CLR 新 的 名 


称 空间 后 ,再 在 数据 字典 中 定义 了 字符 串 ,并 命名 为 str, 在 TextBlock 的 Text 属性 , 绑 定 静 
态 资源 后 ,通过 “ResourceKey 二 str" 设 置 后 , 方 能 正确 地 访问 资源 字典 。 



































图 5.1 窗 体 中 定义 笔 刷 资源 图 5.2 资源 字典 


在 WPF 中 ,界面 上 的 每 一 个 元 素 都 是 一 个 对 象 ,并 且 都 有 一 个 名 为 Resources 的 属性 ， 
Resources 属性 继承 于 FrameworkElement 类 ,其 类 型 为 ResourceDictionary。 由 于 
Resources 是 复数 形式 ,因此 每 一 个 对 象 可 以 拥有 多 个 资源 。 由 于 资源 的 多 样 化 , 故 获 取 到 
的 资源 的 类 型 为 Object 类 型 。 在 获取 到 资源 时 ,必要 时 要 转化 成 符合 要 求 的 类 型 。 资 源 与 
数据 结构 中 的 哈 希 表 相仿 ,对 象 都 是 以 键 值 对 (Key-Value) 的 形式 相关 联 , 当 需要 某 个 资源 
时 ,可 以 通过 Key-Value 来 索引 。 

资源 是 数据 绑 定 的 一 种 特殊 形式 , 它 优 化 了 数据 绑 定 (这 里 的 数据 绑 定 更 新 较 少 )。 在 
WPF 中 ,常见 的 数据 绑 定 名 称 是 Binding。 本 书 还 将 在 第 10 章 讲解 WPF 中 的 对 象 级 资源 
和 二 进 制 资源 。 


5.2 数据 绑 定 原理 


数据 绑 定 是 在 应 用 程序 前 台 UI 表现 层 与 后 台 业 务 逻 辑 层 之 间 拱 建 的 一 座 桥梁 ,实现 
数据 同步 更 新 。 那 么 数据 绑 定 这 座 桥梁 则 连接 着 数据 源 和 数据 目的 地 。 通 常 ,将 从 数据 源 
到 数据 目标 通道 称 为 路 径 (Path) 。 


5.2.1 数据 绑 定 机 制 


首先 来 看 一 个 示例 ,页 面 上 包含 用 户 信息 中 的 姓名 与 年 龄 , 放 一 个 命令 按钮 实现 年 龄 加 
1 的 操作 。 其 对 应 的 XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 --> 
Title = "MainWindow" Height = "175" Width- "230" > 
« Grid Name = "grid" Height = "307" Width- "450" > 
« TextBlock Height - "23" HorizontalAlignment - "Left" 
Margin = "12,12,0,0" Text = "Name:" VerticalAlignment = "Top" /> 
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< TextBlock Height = "23" HorizontalAlignment = "Left" 
Margin = "12,0,0,237" Text = "Age:" VerticalAlignment = "Bottom" /> 
< TextBox Height = "23" HorizontalAlignment = "Left" Width = "120" 
Margin- "74,12,0,0" Name = "nameTextBox" VerticalAlignment = "Top" /> 
< TextBox Height = "23" HorizontalAlignment = "Left" Width = "120" 
Margin- "74,51,0,0" Name = "ageTextBox" VerticalAlignment = "Top" /> 
< Button Content = "Age**" Height = "23" HorizontalAlignment = "Left" Width = "182" 
Margin = "12,98,0,0" Name = "ageaddButton" VerticalAlignment = "Top" /> 
«/Grid» 
«/Window» 


运行 上 述 代码 ,页 面 显示 效果 如 图 5. 3 所 示 。 在 XAML 页 面 上 放置 两 个 TextBlock 
(用 于 用 户 提示 信息 ) 两 个 TextBox( 接 收 姓名 与 年 龄 ) 一 个 Button( 实 现年 龄 加 1 操作 ) 。 

接 下 来 在 后 台 CS 代码 中 创建 一 个 用 户 类 (User) ,用 户 类 含有 Name 和 Age 两 个 属性 。 
代码 如 下 。 

public class User( 


string name; 
public string Name 


( 
get ( return this. name; } 
set ( this. name = value; } 
) 
int age; 


public int Age 
{ 

get { return this.age; } 

set { this.age = value; } 
public User() ( ) 
public User(string name, int age) 
t 

this. name = name; 

this. age = age; 


) 


在 此 ,定义 与 前 台 相 对 应 的 User 类 及 其 属性 ,使 用 类 的 目的 : 在 代码 中 不 直接 操作 控 
件 ,增强 程序 的 可 维护 性 。 
在 后 台 CS 代码 中 加 入 对 象 实例 化 ,为 对 象 赋 初 值 ,设置 grid 的 数据 上 下 文 。 


public partial class MainWindow : Window 
{ User user = new User(" lii AA", 9); 
public MainWindow() 
{ InitializeComponent(); 
//Let the grid know its data context 
grid.DataContext - user; 
this.nameTextBox. Text = user. Name; 
this.ageTextBox. Text = user. Age. ToString() ; 
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下 面 需要 在 XAML 页 面 上 ,将 User 类 中 的 Name 和 Age 两 个 属性 分 别 绑 定 到 
nameTextBox 与 ageTextBox 两 个 控件 的 Text 属性 ,在 XAML 页 面 中 需 增 添 的 代码 如 下 。 
<! -一 保留 Window 代码 部 分 --> 
xmlns:local = "clr- namespace: DataBindingMode" 
Title = "MainWindow" Height = "175" Width = "230" > 
< Grid Name = "grid" Height = "307" Width = "450" > 


< TextBox Text = "(Binding Path = Name]" Name = "nameTextBox" /> 


< TextBox Text = " (Binding Path = Age]" Name = "ageTextBox" /> 


运行 完整 的 代码 ,页 面 显示 效果 如 图 5.4 所 示 。 页 面 中 的 Name 5 Age 与 后 台 CS fX 
码 中 设置 的 值 相同 。 此 页 面 上 ,数据 绑 定 正确 无 误 。 


























EI MainWindow = 
Nene [MR 
Age 7. 
图 5.3 未 实现 数据 绑 定 的 XAML 页 面 图 5.4 XAML 页 面 属性 绑 定 后 台数 据 


XAML 页 面 中 的 Age++ 按 钮 功能 是 : 单 击 该 按钮 ,年龄 加 1 ,并 在 弹出 对 话 框 中 显示 当 
前 年 龄 加 1 后 的 年 龄 值 。 先 在 前 台 XAML 页 面 中 添加 ageaddButton 按钮 的 ageaddButton__ 
Click 事件 ,在 后 台 用 CS 编写 按钮 功能 ,代码 如 下 。 
private void ageaddButton Click(object sender, RoutedEventArgs e) 
{  **user.Age; //user PropertyChanged will update ageTextBox 
MessageBox. Show( string. Format ("Happy Birthday, (0), Age: (1)", 
user.Name, user.Age), "Birthday"); 
) 
运行 上 述 代码 , 单 击 Age++ 按 钮 后 ,页 面 显 示 效 果 如 图 5.5 所 示 。 弹 出 框 中 的 年 龄 是 
10, 但 是 XAML 页 面 中 的 Age 还 是 9。 可见 ,后 台数 据 已 正确 更 新 ,但 是 更 新 后 的 数据 未 传 
回 前 台 页 面 。 
重新 运行 代码 ,在 XAML 页 面 上 输入 数据 后 , 单 击 Age++ 按 钮 ,页 面 显示 效果 如 
图 5.6 所 示 。 从 页 面 上 可 知 ,前 台 XAML 页 面 中 的 数据 更 新 后 ,后 台 CS 代码 中 数据 实现 
了 实时 更 新 。 


E] MainWindow 





























图 5.5 实现 Aget+ 按 钮 的 功能 的 页 面 数据 图 5.6 XAML 页 面 更 新 对 应 后 台数 据 
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对 比 图 5.5 与 图 5.6 的 页 面 可 知 ,在 前 台 XAML 页 面 中 的 数据 更 新 ,后 台 同 步 实 时 更 
新 了 数据 。 但 是 当 后 台 CS 代码 中 的 数据 更 新 时 ,前 台 XAML 页 面 的 数据 未 能 更 新 。 这 种 
数据 绑 定 机 制 可 理解 为 单 向 绑 定 机 制 。XAML 页 面 数据 变化 能 传 到 后 台 CS 中 的 原因 是 : 
每 个 TextBox 都 有 自己 的 TextChanged 事件 实现 同步 更 新 。 由 此 可 以 推理 , 当 后 台数 据 变 
更 时 , 则 应 设置 监听 事件 ,实现 实时 更 新 前 台数 据 。 接 下 来 重新 编写 类 的 定义 ,CS 代码 
如 下 。 


using System. ComponentModel; //1NotifyPropertyChanged 的 namespace 


public class User:INotifyPropertyChanged( 
public event PropertyChangedEventHandler PropertyChanged; 
protected void Notify(string propName)( 
if (this. PropertyChanged!- null) { 
PropertyChanged(this, new PropertyChangedEventArgs( propName)); 
} 
} 
string name; 
public string Name 
i 
get { return this. name; } 
set { 
if (this. name == value) { return; } 
this. name = value; 
Notify("Name"); 
) 
) 
int age; 
public int Age 
( 
get ( return this.age; ) 
set 
( 
if (this. age == value) ( return; } 
this. age = value; 
Notify("Age"); 
} 
} 
public User() { } 
public User(string name, int age) 
{ 
this. name = name; 
this. age = age; 


H 
编写 user PropertyChanged 事件 的 CS 代码 如 下 。 


void user PropertyChanged(object sender, PropertyChangedEventArgs e) 
{ 
Switch (e.PropertyName) 
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case "Name": this. nameTextBox. Text = user. Name; break; 
case "Age": this. ageTextBox. Text = user. Age. ToString(); break; 


) 
在 Window 中 需要 监听 属性 变化 , 需 添加 监听 语句 如 下 。 


public MainWindow() 
{ 
InitializeComponent(); 
grid.DataContext = user; 
this.nameTextBox. Text = user. Name; 
this.ageTextBox. Text = user. Age. ToString(); 
//Watch for changes in user's properties 
user. PropertyChanged += user PropertyChanged; 
} 
private void ageaddButton_Click(object sender, RoutedEventArgs e) 
{ 
++user. Age; //user PropertyChanged will update ageTextBox 
MessageBox. Show (string.Format("Happy Birthday, (0), Age: (1]" , user. Name, 
user. Age), " Birthday"); 
} 


运行 上 述 代 码 , 单 击 Age++ 按 钮 后 ,看 到 前 台 XAML 页 面 与 弹出 框 内 容 显 示 页 面 如 
图 5.7 所 示 。 在 前 台 XAML 页 面 输入 数据 ,后 台数 据 与 前 台数 据 同步 更 新 ,如 图 5. 8 所 示 。 























图 5.7 后 台数 据 更 新 与 前 台 页 面 同步 图 5.8 前 台 页 面 更 新 与 后 台数 据 同步 更 新 


INotifyPropertyChanged 是 系统 的 接口 ,实现 后 台 对 象 的 值 发 生 改变 前 台 页 面 实时 更 
新 的 功能 。 注 意 添加 系统 引用 ,实现 接口 的 调用 。 在 5. 3 节 中 重点 介绍 该 接口 的 用 法 。 

在 项 目 开发 时 ,根据 需求 ,实现 单 向 或 双向 的 绑 定 机 制 。WPF 中 的 数据 绑 定 机 制 用 于 
解决 数据 同步 更 新 问题 。 


5.2.2 数据 源 与 路 径 


绑 定 的 目的 是 保持 相关 联 的 数据 点 之 间 的 数据 同步 。 这 个 数据 点 既 包含 了 数据 的 出 发 
点 ,也 包含 了 数据 的 目的 地 。 数 据点 可 以 看 作 单独 的 “ 结 点 ”。 要 描述 数据 点 ,通常 要 借助 数 
据 源 和 路 径 ( 查 询 ) 。 

在 XAML 页 面 中 添加 TextBox 与 ContentControl 两 个 控件 ,它们 的 名 字 分 别 是 


textBoxl .contentControll 。 
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在 WPF 中 ,Binding 类 就 表示 了 数据 点 ,创建 一 个 引用 TextBox 对 象 Text 属性 的 数据 
点 。 在 后 台 用 CS 代码 来 构造 绑 定 ,需要 有 数据 源 和 路 径 ( 查 询 ) ,代码 如 下 。 


Binding bind = new Binding(); 
bind.Source = textBoxl; 
bind. Path = new PropertyPath("Text"); 


接 下 来 构建 contentControll 数据 点 ,让 它 和 textBox1 数据 点 保持 同步 。WPF 的 数据 
绑 定 是 指 将 数据 绑 定 到 元 素 树 或 者 数据 来 自 元 素 树 。 在 此 , 先 用 SetBinding 方法 定义 
contentControll 数据 点 。 


contentControl1. SetBinding(ContentControl. ContentProperty, bind); 


上 面 是 在 后 台 用 CS 代码 构建 数据 点 ,并 设置 路 径 (查询 ) ,进一步 理解 数据 源 和 路 径 。 
接 下 来 用 XAML 代码 来 实现 数据 绑 定 , 代 码 如 下 。 


<! -- 保留 Window 代码 部 分 --> 
<Grid> 
< TextBox Height = "23" HorizontalAlignment = "Left" Margin = "10,10,0,0" 
Name = "textBoxl" VerticalAlignment = "Top" Width = "168" /> 
< ContentControl Height = "50" Margin = "10,58,0,0" Name = "contentControll" 
Content = "(Binding ElementName = textBox1, Path = Text]" 
VerticalAlignment = "Top" /> 
«/Grid» 
</Window> 


运行 上 述 代码 ,在 TextBox 中 输入 字符 串 时 ,ContentControl 控件 中 的 值 与 之 相同 。 
页 面 显示 效果 如 图 5.9 所 示 。 

将 TextBox 中 的 Text 属性 (字符 串 ) 绑 定 到 Content 属性 (对 象 ) ,还 可 以 将 Text 属性 
绑 定 到 FontFamily 属性 ( 它 并 不 是 一 个 字符 串 ) ,其 XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 --> 
< StackPanel > 
< TextBox x:Name = "textBoxl"/> 
< TextBox x:Name = "textBox2"/> 
< ContentControl Margin = "8" Content = "(Binding ElementName = textBox1, Path = Text)" 
FontFamily = "(Binding ElementName = textBox2, Path = Text]" /» 
«/StackPanel > 
</Window> 


运行 上 述 代码 ,页 面 显 示 效 果 如 图 5. 10 所 示 ,表示 一 个 字符 串 转换 为 FontFamily。 


T} MainWind... Ea 
Welcome to the WPF world 


8&3 MainWind.. lie 








Welcome to the WPF world pp 


Welcome to the WPF world 














Welcome to the WPF world 











图 5.9 TextBox 绑 定 ContentControl 图 5. 10 TextBox 绑 定 到 FontFamily 
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5.2.3 值 转 换 机 制 


值 转换 的 基础 机 制 有 TypeConverter 和 IValueConverter。 其 中 ,TypeConverter 是 在 
.NET1.0 版 本 中 就 具有 的 基础 机 制 。 在 上 节 中 出 现 的 FontFamily 是 使 TypeConverter 与 
FontFamily 发 生 关联 ,系统 自动 发 生 转 换 。IValueConverter 是 WPF 独 有 的 值 转换 器 。 

在 WPF 中 ,通过 绑 定 关联 的 值 转换 器 可 以 把 一 种 类 型 转换 成 任何 类 型 (内 置 类 型 和 自 
定义 类 型 ) 。 接 下 来 在 后 台 创建 用 户 自 定义 类 型 ,CS 代码 如 下 。 


public class Person 
{ 
private string name; 
public string Name { 
get{return name;} 
set{name = value;} } 


} 


在 此 ,把 Text 类 型 转换 成 特殊 的 类 型 ,需要 编写 转换 器 ,继承 自 IValueConverter。 因 
为 IValueConverter 接口 还 包含 Convert 和 ConvertBack 方法 的 定义 ,所 以 值 转换 器 都 必须 
实现 Convert 和 ConvertBack 两 种 方法 。 代 码 如 下 。 


public class PersonConverter : IValueConverter { 
public object Convert(object value, Type targetlype, object parameter, System. Globalization. 
CultureInfo culture) 
{ 
Person p 7 new Person() ; 
p. Nane = (string)value; 
return p; 
} 
public object ConvertBack(object value, Type targetType, object parameter, 
System. Globalization. CultureInfo culture) 
{ 
return ((Person) value). Name; 
} 
} 


上 述 代 码 中 的 Convert 方法 表示 从 绑 定数 据 起 点 到 绑 定 目标 的 值 转换 ,ConvertBack 
方法 表示 从 绑 定 目标 到 绑 定数 据 起 点 的 值 转换 。 因 此 , 若 绑 定 模式 是 一 次 性 绑 定 或 单 向 绑 
定 , 只 要 在 Convert 方法 的 实现 中 完成 值 转换 的 工作 即 可 ; 如 果 是 双向 绑 定 ,就 要 同时 在 
Convert 和 ConvertBack 两 种 方法 中 完成 值 转换 的 工作 。 

使 用 值 转换 的 最 后 一 步 是 与 控件 属性 绑 定 ,XAML 绑 定 代码 如 下 。 


< Window x:Class = "ConverterDemo. MainWindow" 
xmlns = "http://schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x = "http://schemas. microsoft. com/winfx/2006/xaml" 
xmlns:local- "clr - namespace:ConverterDemo" 
Title = "MainWindow" Height = "350" Width = "525" 
< StackPanel > 
< TextBox x:Name = "textBox1"/> 
< TextBox x:Name = "textBox2"/> 
< ContentControl Margin = "8" Height = "117" 
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FontFamily = "(Binding ElementName = textBox2, Path = Text}"> 
< ContentControl. Content > 
< Binding ElementName = "textBox1" Path= "Text"> 
< Binding. Converter > 
< local:PersonConverter 
xnlns:local- "clr- namespace:ConverterDemo"» 
«/1local:PersonConverter > 
«/Binding. Converter > 
«/Binding» 
«/ContentControl. Content > 
«/ContentControl- 
«/StackPanel » 
«/ Window 


运行 上 述 代 码 ,ContentControl. Content 已 是 值 转换 器 规定 的 内 容 , 在 TextBox 中 输入 
字符 串 后 ,页 面 显示 效果 如 图 5. 11 所 示 。 需 要 注意 的 是 ,在 XAML 页 面 调用 用 户 自 定义 类 
型 时 ,需要 声明 ,格式 如 下 。 


xmlns:local = "clr - namespace:ConverterDemo" 


其 中 ,local 为 用 户 自 定义 字符 。 

数据 模板 通过 DataType 属性 取得 数据 块 , 并 构建 一 棵 显示 树 。 接 下 来 为 Person 类 构 
建 简单 模板 ,并 把 数据 绑 定 到 Name 属性 上 ,在 上 例 中 的 代码 的 基础 上 ,添加 相应 的 XAML 
代码 如 下 。 


< DataTemplate xmlns:local = "clr - namespace:ConverterDemo" 
DataType = "{x:Type local :Person} "> 
< Border Margin = "8" Padding = "5" BorderBrush = "Green" 
BorderThickness = "5" CornerRadius = "3"> 
< TextBlock Text = " (Binding Path = Name} " /> 
</Border > 
</DataTemplate > 


把 这 个 模板 关联 到 ContentControl, 设 置 Content Template 属性 ,相应 的 XAML 代码 
如 下 。 


< ContentControl Margin = "8" Height = "117" 
FontFamily = "(Binding ElementName = textBox2, Path= Text}"> 
< ContentControl. Content > 
< Binding ElementName = "textBox1" Path= "Text"> 
< Binding. Converter > 
< local:PersonConverter 
xmlns:local = "clr ~ namespace: ConverterDemo"> 
«/1local:PersonConverter > 
</Binding. Converter > 
</Binding> 
</ContentControl. Content > 
< ContentControl. ContentTemplate > 
< DataTemplate xmlns:local = "clr - namespace:ConverterDemo" 
DataType = " {x:Type local :Person}"> 
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< Border Margin = "8" Padding = "5" BorderBrush = "Green" 
BorderThickness = "5" CornerRadius = "3"> 
< TextBlock Text = "(Binding Path = Name]"/» 
</Border > 
</DataTemplate> 
«/ContentControl.ContentTemplate > 
</ContentControl > 
</StackPanel > 
</Window > 


运行 上 述 代码 ,页 面 显示 效果 如 图 5. 12 所 示 。 其 中 < TextBlock Text —" (Binding Path= 
Name}"/> 设 置 数据 绑 定 。 

















Welcome to the WPF world Welcome to the WPF world 

ConverterDemo DatsTempleté. 

neu 
5.11 值 转换 器 实现 绑 定 图 5.12 数据 模板 实现 绑 定 


WPF 数据 绑 定 允 许 任意 数据 上 下 文 和 元 素 建立 关联 。 通 过 使 用 数据 模板 和 数据 上 下 
文 可 以 自动 设置 为 要 进行 转换 的 数据 。 可 以 在 任何 元 素 上 显 式 地 设置 DataContext 属性 及 
在 元 素 或 它们 的 子 元 素 上 用 于 绑 定 的 数据 源 。 

在 了 解数 据 绑 定 的 基本 原理 后 ,需要 再 学 习 数 据 绑 定 的 用 法 ,才能 深刻 地 理解 数据 模板 
系统 。 


5.2.4 数据 绑 定 模型 


数据 绑 定 的 基本 思想 是 数据 点 和 数据 转换 。 人 掌握 了 数据 绑 定 的 原理 后 ,首先 来 认识 数 
据 绑 定 的 模型 ,通过 前 两 节 的 学 习 , 认 识 到 数据 点 (包含 数据 源 和 数据 目标 )、 路 径 (path) 及 
数据 转换 等 数据 绑 定 基 础 知识 ,此 时 可 以 建立 数据 绑 定 模型 ,如 图 5. 13 所 示 。 








单 向 : 数据 源 到 数据 目标 











Data Source >| Data Target 
Path 转 | 单 向 : 数据 目标 到 数据 源 | 检 Dependency 
换 验 Property 
K * * A 
Object 双向 绑 定 Dependency 
Object 


























图 5.13 数据 绑 定 模型 
由 数据 绑 定 模型 可 知 ,一 个 绑 定 有 数据 源 .路 径 、 数 据 目标 和 目标 的 依赖 属性 4 个 组 件 。 


尽管 从 图 5. 13 可 知 , 数 据 绑 定 模式 分 成 单 向 和 双向 两 大 类 。 但 在 WPF 的 Binding 
. Mode 属性 共有 5 个 枚 举 值 ,如 表 5.1 所 示 。 
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表 5.1 Binding. Mode 属性 值 功能 
m 能 





OneWay 


当 源 属性 变化 时 ,更 新 目标 属性 

















TwoWay 当 源 属性 变化 时 ,更 新 目标 属性 ; 当 目 标 属性 变化 时 ,更 新 源 属 性 

OneTime 根据 源 属性 设置 目标 属性 ,但 不 传播 后 续 更 改 ,降低 系统 开销 

OneWayToSource 当 目 标 属性 变化 时 ,更 新 源 属性 

Default 未 指明 绑 定 模式 , 则 依赖 于 目标 属性 ,可 以 是 双向 的 (用 户 可 以 设置 的 属性 ， 
TextBox. Text 属性 ) ,也 可 以 是 单 向 的 (对 于 所 有 其 他 属性 ) 

表 5.1 给 出 了 数据 绑 定 模式 的 5 种 方式 。 当 数据 绑 定 模式 未 给 出 时 ,系统 默认 Default 
类 型 。 接 下 来 ,继续 使 用 数据 绑 定 机 制 中 的 案例 (XAML 包含 姓名 、 年 龄 .年 龄 加 1 按钮 )， 
在 此 基础 上 , 自 定义 “检验 器 ”。 

检验 器 功能 : 对 用 户 在 XAML 页 面 输入 的 年 龄 值 进行 校 验 ,规定 年 龄 值 : 0 一 120 的 整 


数 。 若 不 在 此 范 
在 后 台 创建 


public class 
{ 


围 , 给 出 用 户 出 错 提示 信息 。 
数值 校 验 规则 类 ,命名 为 NumberRangeRule。CS 代码 如 下 。 


NumberRangeRule : ValidationRule 


int min; 


publ 
{ 


} 


ic int Min 


get { return min; } 


set { min= value; } 


int max; 


publ 
{ 


} 


ic int Max 


get { return max; } 
set ( max = value; } 


public override ValidationResult Validate (object value, System. Globalization 


} 


.CultureInfo cultureInfo) 


int number; 
if (!int. TryParse((string)value, out number)) 
1 
return new ValidationResult(false, "Invalid number format"); 
} 
if (number < min || number > max) 
{ 
return new ValidationResult (false, string. Format("Number out of range ((0) — 
1)", nin, nax)); 
) 
return ValidationResult. ValidResult; 


由 于 NumberRangeRule 继承 自 系 统 的 ValidationRule, 重 载 了 系统 的 ValidateO Jr ik. 
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在 XAML 页 面 中 需要 添加 的 代码 如 下 。 


« Window x:Class = "DataBindingMode. MainWindow" 
xmlns = "http://schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x- "http: //schemas. microsoft. com/winfx/2006/xaml" 
xmlns:local- "clr- namespace:DataBindingMode" 
Title = "MainWindow" Height = "175" Width = "230" Loaded = "Window Loaded" 
<! -- 保留 原 有 控件 代码 部 分 --> 
< TextBox Height = "23" Width = "120" HorizontalAlignment = "Left" Margin = "74,51,0,0" Name = 
"ageTextBox" VerticalAlignment = "Top" 
< TextBox. Text > 
« Binding Path = "Age" NotifyOnValidationError = "True" 
« Binding. ValidationRules > 
< local:NumberRangeRule Min = "0" Max - "120" 
xmlns: local = "clr - namespace:DataBindingMode" > 
</local : NumberRangeRule > 
</Binding. ValidationRules > 
</Binding> 
</TextBox. Text > 
</TextBox > 
<! -- 保留 原 有 控件 代码 部 分 --> 


运行 完整 的 代码 ,在 Age 对 应 的 文本 框 中 输入 “888” 后 ,文本 框 变 红 ,引起 用 户 注 意 ,如 
图 5.14 所 示 。 在 单 击 Age++ 按 钮 后 ,弹出 有 效 性 校 验 窗口 ,如 图 5.15 所 示 。 





Number out of range (0-120) 


图 5.14 输入 不 合法 的 XAML 页 面 5.15 有 效 性 校 验 窗口 

















在 前 面 的 案例 中 ,并 未 明确 给 出 Binding. Mode, 此 时 “Binding. Mode— Default", 4 HA 
标 属性 是 TextBox. Text 时 ,实现 双向 绑 定 。 


5.3 数据 绑 定 用 法 


数据 绑 定 是 WPF 程序 重要 的 新 技术 ,由 于 其 强大 的 功能 及 灵活 性 也 导致 软件 开发 人 
员 在 编写 绑 定 的 过 程 中 产生 很 大 的 疑问 。 本 节 从 数据 绑 定 的 习惯 用 法 出 发 ,诠释 WPF 数 
据 驱动 UI 的 思想 。 


5.3.1 IKRE 


1. 不 同 控件 间 绑 定 
让 Slider 控件 与 TextBox 控件 绑 定 .XAML 代码 如 下 。 
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«Grid» 
< Slider Name = "sliderl" Height = "23" HorizontalAlignment = "Left" 
Margin = "10,10,0,0" VerticalAlignment = "Top" Width = "188" /> 
< TextBox Name = "textBoxl" Height = "23" HorizontalAlignment = "Left" 
VerticalAlignment = "Top" Width - "188" Margin = "10,43,0,0" 
Text = " (Binding ElementName = slider1, Path = Value, Mode = TwoWay} "> 


«/'TextBox > 
«/Grid» 
运行 上 述 代码 , 当 拖 动 滑 块 时 文本 框 中 的 数值 会 随 着 滑 块 动态 改变 ,如 图 5. 16 所 示 。 
在 文本 框 中 输入 “3” 后 , 按 下 Tab 键 ( 释 放 焦点 ) , 滑 块 会 移 到 相应 位 置 ,如 图 5. 17 所 示 。 这 


是 “Mode 二 TwoWay” 时 ,XAML 页 面 的 变化 。 请 读者 将 绑 定 模式 更 改 后 ,查看 页 面 变 化 。 








5.7909604519774 


























图 5.16 文本 框 数 值 随 着 滑 块 变化 图 5.17 滑 块 随 着 文本 框 变化 


2. 相同 控件 间 绑 定 
让 两 个 TextBox 绑 定 ,在 第 1 个 TextBox 中 输入 数值 时 ,第 2 个 TextBox 中 同步 显示 ; 


HEP 2 个 TextBox 中 输入 数值 时 ,第 1 个 TextBox 也 实时 更 新 。XAML 代码 如 下 。 


< StackPanel > 
< Label > TwoWayInput String </Label > 
< TextBox Name = "textBoxTwoWayInput"/> 
< Label > TwoWayOutput String:</Label > 
< TextBox Name = "textBoxIwoWayOutput" Text = "(Binding Text, ElementName = textBoxIwoWayInput, 
UpdateSourceTrigger = PropertyChanged }" /> 
</StackPanel > 
运行 上 述 代码 ,在 名 为 textBoxTwoWayInput 的 TextBox 中 输入 “I am Input”, 如 图 5. 18 
所 示 ; 在 名 为 textBoxTwoWayOutput 的 TextBox 中 输入 “I am Output”, 如 图 5. 19 所 示 。 
本 例 与 上 例 的 区 别 是 : 此 处 绑 定 时 ,UpdateSourceTrigger 属性 值 设 为 PropertyChanged, 这 时 ， 
TextBox 控件 的 默认 值 是 LostFocus( 失 去 焦点 ) ,就 可 以 做 到 实时 更 新 。 


mì MainWindow (esl 








TwoWaylnput String 


1am Input 


TwoWayOutput String: 


Lam Input 











TwoWayInput String 
Iam output 
TwoWayOutput String: 








lam output 











图 5.18 TextBox 间 绑 定 5.19 实时 更 新 TextBox 绑 定 值 


5.3.2. 控件 绑 定 资源 文件 值 
在 此 ,用 一 个 TextBox 绑 定 资源 文件 的 值 ,再 加 入 一 个 TextBox, 让 它 与 前 一 个 
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TextBox 绑 定 。 前 台 设 计 页 面 的 XAML 代码 如 下 。 


< Window x:Class = "DataBindingUsage0. MainWindow" 
xmlns = "http://schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x = "http: //schemas. microsoft. com/winfx/2006/xaml" 
xnlns:sys = "clr - namespace: System; assembly = mscorlib" 
Title = "MainWindow" Height = "350" Width = "525"> 
< Window. Resources > 
< sys:String x:Key = "TestInfo"> Hello World!</sys:String> 
</Window. Resources > 
< StackPanel > 
< Label > Read from resources: </Label > 
< TextBox Name = "textBox" Text = "(StaticResource TestInfo}"></TextBox > 
< TextBox Text = "{ Binding Text, ElementName = textBox, 
UpdateSourceTrigger = PropertyChangedj"/> 
«/StackPanel > 
</Window > 


运行 上 述 代 码 ,页 面 显示 效果 如 图 5. 20 所 示 , 两 个 TextBox 都 绑 定 了 资源 文件 字符 。 
在 TextBox 中 输入 新 的 内 容 后 ,两 个 TextBox 值 相同 ,如 图 5. 21 所 示 。 




















Ei MainWindow Æ) MainWindow 
Read from resources : Read from resources : 
Hello World! Welcome to DataBinding World! 
Hello World! Welcome to DataBinding World! 























图 5. 20 TextBox 绑 定 资源 文件 的 值 图 5.21 两 个 TextBox 联动 


5.3.3 属性 变更 通知 接口 


数据 绑 定 机 制 中 的 案例 是 为 了 阐明 数据 绑 定 的 原理 ,看 起 来 有 些 复杂 ,在 实际 使 用 数据 
绑 定时 ,只 要 调用 INotifyPropertyChanged( 属 性 变更 通知 接口 ) ,程序 会 变 得 更 简洁 。 本 节 
将 重点 介绍 INotifyPropertyChanged 的 使 用 方法 。 

属性 变更 通知 接口 的 实现 和 使 用 步骤 如 下 。 

(1) 创建 一 个 类 ,继承 并 实现 INotifyPropertyChanged 接口 。 

(2) 在 该 类 中 创建 一 个 名 为 Notify() 的 包装 函数 ,其 功能 是 实现 属性 变更 通知 (也 就 是 
说 ,执行 PropertyChanged 事件 ,该 事件 含有 一 个 参数 ,参数 为 string 类 型 ) 。 

(3) 实现 属性 变更 通知 。 如 果 属 性 的 实际 值 发 生 更 改 后 , 则 调用 Notify() 。 

针对 数据 绑 定 机 制 中 的 案例 , 先 来 编写 CS 中 的 User 类 ,代码 如 下 。 


using System. ComponentModel; // 引 用 INotifyPropertyChanged 
namespace WPF IPropertyChanged 
(//Step 1: User 类 继承 INotifyPropertyChanged 
public class User : INotifyPropertyChanged 
(//Step 2: Notify 包 装 函数 定义 
protected void Notify(string propName) 
t 
if (this. PropertyChanged!- null) 
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PropertyChanged(this, new PropertyChangedEventArgs(propName)); 


) 
string name; 
public string Name 


{ 
get ( return this.name; } 
set ( if (this. name == value) ( return;); 
this.name - value; 
Notify("Name"); //Step 3: 实现 属性 变更 通知 
) 

) 

int age; 

public int Age 

i 
get { return this. age; } 
set {if (this. age == value) { return; } 
this. age = value; 
Notify("Age"); //Step 3: 实现 属性 变更 通知 
) 

) 


public User() ( ) 
public User(string name, int age) 
$ 
this. name = name; 
this. age = age; 
} 
public event PropertyChangedEventHandler PropertyChanged; //Step 1: 实现 接口 


} 
在 前 台 页 面 的 XAML 代码 如 下 。 


< Window x:Class = "WPF_IPropertyChanged. MainWindow" 
xmlns = "http://schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x= "http://schemas. microsoft. com/winfx/2006/xaml" 
xmlns:local = "clr- namespace:WPF IPropertyChanged" 
Title = "MainWindow" Height = "350" Width = "525" 
< Grid Height = "307" Width = "450" Name = "grid"> 
< TextBlock Height = "23" HorizontalAlignment = "Left" 
Margin = "12,12,0,0" Text = "Name:" VerticalAlignment = "Top" /> 
< TextBlock Height = "23" HorizontalAlignment = "Left" 
Margin = "12,0,0,237" Text = "Age:" VerticalAlignment = "Bottom" /> 
< TextBox Text = "(Binding Name]" Height = "23" HorizontalAlignment = "Left" Width = "120" 
Margin = "74,12,0,0" Name = "nameTextBox" VerticalAlignment = "Top" /> 
< TextBox Text = "(Binding Age]" Height = "23" Width- "120" 
HorizontalAlignment = "Left" Margin = "74,51, 0, 0" Name = "ageTextBox" 
VerticalAlignment = "Top" /> 
< Button Content = "Age++" Height = "23" HorizontalAlignment = "Left" Width = "182" 
Margin = "12,98,0,0" Name = "ageaddButton" VerticalAlignment = "Top" Click 
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= "ageaddButton Click" /> 
</Grid> 
</Window> 


观察 上 述 代码 ,两 个 TextBox 分 别 只 绑 定 了 后 台 的 Name 和 Age 属性 。 
下 面 给 出 MainWindow. xaml. cs 的 代码 。 


namespace WPF IPropertyChanged( 
/// < summary » 
/// MainlWindow.xaml 的 交互 逻辑 
/// </summary> 
public partial class MainWindow : Window 
{ // 创 建 User 类 的 对 象 ,并 赋 初 值 ; 
User user = new User(" 谢 浩然 "，9); 
public MainWindow() 
{ 
InitializeComponent(); 
grid.DataContext = user; // 把 对 象 user 赋值 给 前 台 名 为 grid 的 数据 上 下 文 ; 
this. nameTextBox. Text = user. Name; // 将 user 对 象 的 Name 属性 绑 定 到 前 台 控件 ; 
this. ageTextBox. Text = user. Age. ToString(); } 
private void ageaddButton Click(object sender, RoutedEventArgs e) 
{ 
++user. Age; 
MessageBox. Show (string. Format ( "Happy Birthday, {0}, Age: é0{1}", user. Name, 
user.Age), "Birthday"); 


) 


运行 上 述 代码 ,页 面 显示 效果 与 图 5. 7 和 图 5. 8 相同 。 

下 面 介 绍 INotifyPropertyChanged 接口 功能 ,部 分 功能 将 在 5. 3.4 节 的 案例 中 体现 。 

(1) 有 两 个 集合 类 型 ,分 别 是 System. Collections. ObjectModel. ObservableCollection 
<T> 和 System. ComponentModel. BindingList< 工 >。 

(2) 有 两 个 数据 源 ,分 别 是 CompositeCollection 和 CollectionViewSource。 

G) 具有 两 个 数据 提供 者 ,分别 是 DataSourceProvider 和 XmlDataProvider。 该 类 的 派 
生 类 有 ObjectDataProvider, XmlDataProvider 允许 用 户 访问 XML 数据 。ObjectDataProvider 
能 够 在 XAML 中 以 如 下 方式 创建 绑 定 源 对 象 : 使 用 MethodName 和 MethodParameters 属 
性 执行 函数 调用 ; 使 用 ObjectType 指定 类 型 并 通过 ConstructorParameters 属性 将 参数 传 
递 给 对 象 的 构造 函数 ; 直接 为 ObjectInstance 属性 赋值 指定 需要 用 作 绑 定 源 的 对 象 。 


5.3.4 绑 定 到 列表 框 


在 程序 开发 中 ,数据 通常 以 列表 的 方式 呈现 。 将 数据 绑 定 到 ListBox 是 常见 的 数据 绑 
定形 式 。 现 在 要 求实 现 如 图 5. 22 所 示 的 页 面 效果 。 页 面 分 为 上 .中 .下 三 部 分 ,上 部 分 是 用 
ListBox 呈现 姓名 ; 中 间 部 分 是 两 个 TextBox, 用 于 显示 姓名 与 年 龄 ; 下 面 是 4 个 按钮 ,分 
别 用 于 显示 第 一 条 数据 前 一 条 数据 、 下 一 条 数据 和 最 后 一 条 数据 。 页 面 执行 的 业务 逻辑 
Æ: 当 单 击 ListBox 中 的 姓名 时 ,两 个 TextBox 中 的 值 也 随 之 改变 , 单 击 某 按钮 ,页面 上 显 


102 wpF 编程 基础 





示 其 相应 的 数据 内 容 。 

先 创建 User 类 ,其 数据 结构 与 上 节 完 全 相同 , 略 去 类 定义 相同 代码 。 再 创建 Users 类 ， 
因为 Users 是 作为 User 的 数据 集合 使 用 ,所 以 需要 继承 自 ObservableCollection < User >， 
为 XAML 代码 中 Windows 中 的 资源 做 准备 。 其 CS 代码 中 仅 一 条 语句 如 下 。 


class Users : ObservableCollection < User» ( } 


Users 类 继承 ObservableCollection < User >, 是 INotifyPropertyChanged 接口 的 集合 
类 型 ,该 属性 变更 接口 还 有 一 个 集合 类 型 ,是 System. ComponentModel. BindingList < T >, 
也 很 常用 。 接 下 来 ,编写 前 台 设 计 页 面相 应 的 XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 --> 
xmlns:local = "clr - namespace:DataBindingListBox" 
Title = "MainWindow" Height = "228" Width = "283"> 
< Window. Resources > 
< local:Users x:Key = "Userset"> 
< local:User Name = "赵子龙 " Age = "120 "/> 
< local:User Name = " 谢 浩 然 " Age = "10 "/> 
< local:User Name = "þK E" Age- "20 "/> 
< local:User Name = "花木 兰 " Age- "90 "/> 
< local:User Name = "诸葛 亮 " Age = "120 "/» 
< local:User Name = " 穆 桂 英 "age= "90 "/> 
< local:User Name = "E" Age- "20 "/> 
< local:User Name = " 李 婉 童 " Age = "10 "/> 
</local:Users> 
</Window. Resources > 
<Grid Name = "grid" Height = "195" DataContext = "(StaticResource Userset]"» 
« TextBlock Height = "23" HorizontalAlignment = "Left" Margin = "6, 71, 0, 0" Name = 
"textBlockl" Text = "Name:" VerticalAlignnent = "Top" Width = "43" /> 
< TextBlock Height = "23" HorizontalAlignment = "Left" Margin = "6, 0, 0,72" Name = 
"textBlock2" Text = "Age:" VerticalAlignment = "Bottom" Width = "43" /> 
< TextBox Text = " (Binding Path = Name]" Name = " nameTextBox" Height = " 23" 
HorizontalAlignment = "Left" Margin = "129, 68,0, 0" VerticalAlignnent = "Top" 
Width = "120"/» 
< TextBox Text = " (Binding Path = Age)" Name = " ageTextBox" Height = " 23" 
HorizontalAlignment = "Left" Margin = "129, 100, 0, 0" VerticalAlignment = "Top" 
Width = "120" /> 
« TextBlock Height = "23" HorizontalAlignment = "Left" Margin = "6,10, 0,0" Width = "58" 
Text = "DataSet :" Name = "textBlock3" VerticalAlignment = "Top" /» 
< ListBox ItemsSource = "(Binding)" IsSynchronizedWithCurrentItem = "True" 
SelectedValuePath = "Age" DisplayMemberPath = "Name" Height = "52" HorizontalAlignment = 
"Left" Margin = "70, 10, 0, 0" Name = "userListBox" VerticalAlignment = "Top" Width = 
"3179" > 
</ListBox > 
< Button Content = "First" Height = "23" HorizontalAlignment = "Left" Margin = "6, 127, 
0,0" Name = "firstButton" VerticalAlignment = " Top" Width = "47" Click = 
"firstButton_Click" /> 
< Button Content = "Previo" Height = "23" HorizontalAlignment = "Left" Margin = "70, 
127,0,0" Name = "previousButton" VerticalAlignment = "Top" Width = "47" Click = 
"previousButton_Click" /> 
< Button Content = "Next" Height = "23" HorizontalAlignment = "Left" Margin = "137,127, 
0,0" Name = "nextButton" VerticalAlignment = "Top" Width = "47" Click = 
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"nextButton Click" /> 
< Button Content = "Last" Height = "23" HorizontalAlignnment = "Left" Margin = "202,127, 
0,0" Name = "lastButton" VerticalAlignment = " Top" Width = "47" Click = 
"lastButton Click" /» 
«/Grid» 
</Window > 


分 析 上 述 XAML 代码 ,解释 新 增 语句 及 属性 的 作用 。 
(D 在 Windows. Resources 调用 Users 类 ,并 将 其 命名 为 Userset, 语 句 如 下 所 示 。 


< local:Users x:Key = "Userset"> 


(2) Grid 中 的 数据 上 下 文 是 调用 在 Windows. Resources 中 已 定义 好 的 静态 资源 
Userset ,定义 语句 是 “DataContext 王 "{StaticResource Userset) "", 


(3) 两 个 文本 框 的 Text 属性 分 别 绑 定 User 类 中 的 Name 和 Age 属性 。 语 句 如 下 。 


< TextBox Text = "(Binding Path = Name]" Name = "naneTextBox" >; < TextBox Text = "(Binding Path = 
Age)" Name = "ageTextBox"> 


(4) 列表 框 中 ,数据 源 同步 当前 数据 项 ,选择 值 的 路 径 、 显 示 成 员 路 径 分 别 对 应 的 属性 
ItemsSource, IsSynchronizedWithCurrentItem, SelectedValuePath 和 DisplayMemberPath 。 

下 面 在 后 人 台 定 义 GetUsersetView() 方 法 ,实现 在 列表 框 中 加 载 数 据 功 能 ,CS 代码 
如 下 。 


using System. ComponentModel; 
public partial class MainWindow : Window 
{  ICollectionView GetUsersetView() 
( Users users = (Users)this. FindResource("Userset"); 
return CollectionViewSource. GetDefaultView(users); 
) 
User user = new User() ; 
List «User» list = new List < User >(); 
public MainWindow() 
{ InitializeComponent(); } 
} 


上 面 代码 中 的 GetUsersetView() 方 法 的 返回 值 类 型 是 ICollectionView ,该 集合 类 型 具 
有 管理 当前 数据 集 ( 自 定义 排序 .筛选 .分 组 等 ) 功 能 。 在 return 返回 值 中 出 现 的 关键 字 
CollectionViewSource 是 数据 源 。 


继续 添加 4 个 按钮 (firstButton、previousButton、nextButton、lastButton) 的 双击 事件 ， 
代码 如 下 。 


private void firstButton Click(object sender, RoutedEventArgs e) 
{ if (userListBox. SelectedItem!= null) 
{ userListBox. SelectedIndex = 0; } 
} 
private void previousButton Click(object sender, RoutedEventArgs e) 
ICollectionView view = GetUsersetView(); 
view.MoveCurrentToPrevious(); 
if(view.IsCurrentBeforeFirst) 
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{ view.MoveCurrentToFirst(); } 
) 
private void nextButton Click(object sender, RoutedEventArgs e) 
í ICollectionView view = GetUsersetView(); 
view.MoveCurrentToNext(); 
if (view.IsCurrentAfterLast) 
{ view.MoveCurrentToLast(); } 
} 
private void lastButton Click(object sender, RoutedEventArgs e) 
í if (userListBox. SelectedItem!= null) 


{ userListBox. SelectedIndex = userListBox. Items. Count - 1; } 
] 


运行 完整 的 代码 ,页 面 显示 效果 如 图 5. 22 所 示 。 单 击 Next 按钮 ,页 面 运行 效果 如 
图 5. 23 所 示 ,TextBox 中 的 数据 与 ListBox 中 的 数据 项 始终 保持 一 致 。 
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5.4 小 结 


本 章 介绍 了 数据 驱动 模型 .数据 绑 定 原理 及 数据 绑 定 用 法 。WPF 数据 驱动 UI 的 设计 
思想 让 数据 成 为 应 用 程序 的 中 心 ,真正 体现 了 “程序 = 数据 十 算法 ”的 本 质 。 
习题 与 实验 5 


1. 简 述 数据 绑 定 的 原理 及 目的 。 
2. 实现 数据 绑 定 多 种 控件 组 合 , 如 图 5. 24 所 示 。 
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5.24 $E ListBox 对 象 








3. 设计 数据 绑 定 到 ListBox。 功 能 : 选中 左边 列表 框 中 的 朝代 ,右边 ListBox 中 显示 该 
朝代 的 名 人 ,如 图 5. 25 所 示 。 例 如 ,选中 元 朝 ,对 应 着 元 朝 的 名 人 。 
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图 5.25 朝代 与 人 物 绑 定 页 面 


4. 在 本 章 绑 定 到 列表 框 的 页 面 下 部 加 入 Add, Sort, Filter, Group 这 4 个 按钮 ,实现 数 
据 添加 、 按 年 龄 排序 .过 滤 \ 按 年 龄 分 组 功能 。 程 序 运行 后 的 初始 页 面 如 图 5. 26 所 示 。 单 击 
Group 按钮 ,列表 框 中 的 数据 按 年 龄 分 组 ,页面 显示 效果 如 图 5. 27 所 示 。 
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图 5.26 绑 定 到 ListBox 新 添 功能 5.27 年 龄 分 组 页 面 
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路 由 事件 


Windows 在 操作 系统 平台 占有 绝对 统治 地 位 ,基于 Windows 的 编程 和 开发 越 来 越 广 
泛 。 学 习 本 章 路 由 事件 时 , 需 首先 回顾 操作 系统 中 的 过 程 驱动 .消息 机 制 、. 事 件 驱动 模型 , 然 
后 再 学 习 WPF 中 的 路 由 事件 机 制 。 

在 早期 的 DOS(Disk Operating System, 磁盘 操作 系统 ) 下 的 任何 程序 都 使 用 顺序 的 、 
过 程 驱动 的 程序 设计 方法 。 这 种 程序 都 有 一 个 明显 的 开始 .明显 的 过 程 及 一 个 明显 的 结束 ， 
因此 通过 程序 就 能 直接 控制 程序 事件 或 过 程 的 全 部 顺序 。 即 使 是 在 处 理 异 常 时 ,处 理 过 程 
也 仍然 是 顺序 的 .过 程 驱动 的 结构 ,所 以 DOS 是 过 程 驱动 机 制 。 而 Windows 是 事件 驱动 
的 ,事件 驱动 围绕 着 消息 的 产生 与 处 理 展开 ,事件 驱动 是 靠 消息 循 环 机 制 来 实现 的 。 而 
WPF 的 路 由 事件 ,又 扩充 了 事件 驱动 模型 ,通过 自 定义 路 由 事件 ,能 够 实现 用 户 更 大 的 需 
求 , 以 解决 实际 问题 。 下 面 从 消息 机 制 开 启 本 章 内 容 。 


6.1 消息 机 制 


在 Windows 中 发 生 的 一 切 都 可 以 用 消息 来 表示 ,消息 用 于 告诉 操作 系统 发 生 了 什么 ， 
所 有 的 Windows 应 用 程序 都 是 消息 驱动 的 。 一 个 消息 是 由 消息 的 名 称 (UINT) 和 两 个 参 
数 (WPARAM 和 LPARAM) 组 成 的 。 消 息 的 参数 中 包含 有 重要 的 信息 。 例 如 ,对 鼠标 消 
息 而 言 ,LPARAM 中 一 般 包含 鼠标 的 位 置信 息 , 而 WPARAM 参数 中 包含 了 发 生 该 消息 
时 ,Shift、Ctrl 等 键 的 状态 信息 。 对 于 不 同 的 消息 类 型 来 说 ,两 个 参数 也 都 相应 地 具有 明确 
的 意义 。 


6.1.1 消息 的 运行 机 制 


消息 常 被 说 成 Windows 操作 系统 的 灵魂 ,是 掌握 Windows 编程 的 神 兵 利器 。 在 路 由 
事件 学 习 前 , 先 来 了 解 一 下 消息 运行 机 制 。 

1. 消息 的 概念 

消息 (Message) 是 指 Windows 操作 系统 发 给 应 用 程序 的 一 个 通告 , 它 告 诉 应 用 程序 某 
kii tiii 例如 ,用 户 单 击 鼠 标 或 按键 都 会 引发 Windows 系统 发 送 相应 的 消 

。 最 终 处 理 消息 的 是 应 用 程序 的 窗口 函数 ,如 果 程 序 不 处 理 , 操 作 系统 将 会 做 出 默认 处 
m. 消息 包含 了 消息 的 类 型 标识 符 和 其 他 附加 信息 。 从 数据 结构 的 角度 来 说 , 它 是 一 个 结 
构 体 类 型 ,系统 定义 的 结构 体 MSG 用 于 表示 消息 ,定义 形式 如 下 。 
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typedef struct tagMSG 
{ HWND hwnd; 
UINT message; 
WPARAM wParam; 
LPARAM lParam; 
DWORD time; 
POINT pt; 
)MSG; 
其 中 ,hwnd 是 窗口 的 句柄 ,这 个 参数 将 决定 由 哪个 窗口 过 程 函数 对 消息 进行 处 理 ; message 
是 一 个 消息 常量 ,用 来 表示 消息 的 类 型 ， wParam 和 lParam 都 是 32 位 的 附加 信息 ,具体 表 
示 什 么 内 容 , 要 视 消 息 的 类 型 而 定 ; time 是 消息 发 送 的 时 间 ; pt 是 消息 发 送 时 鼠标 所 在 的 
位 置 。 
2. Windows 编程 原理 
Windows 编程 是 通过 消息 机 制 来 实现 , 故 把 Windows 视 为 消息 (Message) 驱动 式 系 
统 。 消 息 机 制 实现 了 应 用 程序 之 间 、 应 用 程序 与 操作 系统 之 间 的 通信 方式 。 消 息 触发 .消息 
响应 及 处 理 行 为 实现 应 用 程序 的 功能 。 在 Windows 系统 中 ,有 系统 消息 队列 和 应 用 程序 消 
息 队列 两 种 。Windows 监控 所 有 输入 设备 。 当 一 个 事件 被 触发 ,Windows 先 将 输入 的 消息 
放 人 系统 消息 队列 中 ,随后 再 将 输入 的 消息 复制 到 相应 的 应 用 程序 队列 中 ,应 用 程序 中 的 消 
息 循环 从 它 的 消息 队列 中 检索 每 一 个 消息 并 发 送 给 相应 的 窗口 函数 中 。 消 息 就 是 描述 事件 
发 生 的 信息 ,Windows 程序 是 事件 驱动 的 ,故此 Windows 程序 的 执行 顺序 由 事件 的 发 生 顺 
序 来 决定 ,具有 不 可 预知 性 。 应 用 程序 操作 系统 和 计算 机 硬件 (输入 输出 设置 ) 之 间 的 关系 
如 图 6.1 所 示 。 
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图 6.1 应 用 程序 ,操作 系统 和 计算 机 硬件 之 间 的 关系 


箭头 1 说 明 操作 系统 能 够 操纵 输入 输出 设备 ,如 让 打印 机 打印 。 箭 头 2 说 明 操 作 系 统 
能 够 感知 输入 输出 设备 的 状态 变化 ,如 鼠标 单 击 、 按 键 按 下 等 ,这 就 是 操作 系统 和 计算 机 硬 
件 之 间 的 交互 关系 。 应 用 程序 开发 者 并 不 需要 知道 它们 之 间 是 如 何 做 到 的 ,读者 需要 了 解 
的 是 操作 系统 与 应 用 程序 之 间 如 何 交互 。 箭 头 3 是 应 用 程序 通知 操作 系统 执行 某 个 具体 的 
操作 ,这 是 通过 调用 操作 系统 的 API 来 实现 的 ; 操作 系统 也 能 够 感知 硬件 的 状态 变化 ,但 并 
不 决定 如 何 处 理 ,而 是 把 这 种 变化 转交 给 应 用 程序 ,由 应 用 程序 决定 如 何 处 理 。 向 上 的 箭头 
4 说 明了 这 种 转交 情况 ,操作 系统 通过 把 每 个 事件 都 包装 成 一 个 称 为 消息 结构 体 MSG 来 实 
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现 这 个 过 程 , 也 就 是 消息 响应 。 在 掌握 消息 概念 和 Windows 编程 原理 的 前 提 下 ,再 来 认识 
消息 循环 。 

3. Windows 消息 循环 

应 用 程序 通过 消息 循环 来 获取 各 种 消息 ,通过 相应 的 窗口 过 程 函 数 ,对 消息 处 理 ; 消息 
循环 让 应 用 程序 响应 外 部 各 种 事件 ,消息 循环 是 一 个 Windows 应 用 程序 的 核心 部 分 。 

Windows 操作 系统 为 每 个 线程 维持 一 个 消息 队列 , 当 事 件 产生 时 ,操作 系统 感知 这 一 
事件 的 发 生 , 并 包装 成 消息 发 送 到 消息 队列 ,应 用 程序 通过 GetMessage() 函 数 取得 消息 并 
存 于 一 个 消息 结构 体 中 ,通过 TranslateMessage() 解 释 消 息 ,通过 Dispatch Message() 分 发 
消息 。 下 面 的 代码 描述 了 Windows 的 消息 循环 。 


while(GetMessage(&msg, NULL, 0, 0)) 
{ TranslateMessage(&msg) ; 
DispatchMessage(&msg) ;} 


TranslateMessage(&msg) 用 于 解释 键盘 按键 按 下 和 弹 起 (分 别 对 于 KeyDown 和 
KeyUp 消息 ) ,产生 一 个 WM CHAR 消息 。 对 于 大 多 数 消息 是 不 起 作用 的 。 

DispatchMessage( &msg) 把 消息 发 到 消息 结构 体 中 对 应 的 窗口 ,由 窗口 过 程 函 数 处 理 
消息 。GetMessage() 在 取得 WM_QUIT 之 前 返回 值 均 为 TRUE, 也 就 是 说 只 有 获取 到 
WM QUIT 消息 , 才 返 回 FALSE, 才 能 跳出 消息 循环 。 

4. 消息 处 理 

消息 由 窗口 处 理 函 数 进行 处 理 。 对 于 每 个 窗口 类 ,Windows 都 预备 了 一 个 默认 的 窗口 
过 程 处 理 函 数 DefWindowProc()。 这 样 做 的 好 处 是 ,可 以 着 眼 于 用 户 感 兴趣 的 消息 ,把 其 
他 不 感 兴趣 的 消息 传递 给 默认 窗口 过 程 函数 进行 处 理 。 每 一 个 窗口 类 都 有 一 个 窗口 过 程 函 
数 , 此 函数 是 一 个 回调 函数 , 它 是 由 Windows 操作 系统 负责 调用 的 ,而 应 用 程序 本 身 不 能 调 
HÈ. U switch 语句 开始 ,对 于 每 条 感 兴趣 的 消息 都 以 一 个 case 引出 。 下 面 的 代码 描述 了 
Windows 的 消息 处 理 过 程 。 

LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, 


LPARAM lParam) 
( 


switch(uMsgId) 

{case WM TIMER: // 对 WM. TIMER 定时 器 消息 的 处 理 过程 
return 0; 

case WM LBUTTONDOWN: // 对 单 击 消息 的 处 理 过 程 


return 0; 


default: 
return DefWindowProc( hwnd, uMsgId, wParam, lParam) ; } 


} 
对 于 每 条 已 经 处 理 过 的 消息 都 必须 返回 0; 否则 ,消息 将 不 停 地 重 试 下 去 ; 对 于 不 感 兴 
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趣 的 消息 , 交 给 DefWindowProc() 函数 进行 处 理 ,并 需要 返回 其 处 理 值 。 消 息 处 理 机 制 如 
图 6.2 所 示 。 
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6.2 消息 处 理 机 制 


6.1.2 事件 模型 


消息 是 事件 的 前 身 , 消 息 的 本 质 就 是 一 组 数据 记录 执行 的 操作 ,消息 处 理 函数 根据 消息 
数据 执行 相应 的 操作 。 随 着 微软 面向 对 象 开 发 平台 的 日 益 成 熟 , 消 息 机 制 被 封装 成 事件 模 
型 。 事 件 模型 隐藏 了 消息 机 制 的 许多 细节 。 当 对 象 有 相关 的 事件 发 生 时 (如 按 下 鼠标 键 )， 
对 象 产生 一 条 特定 的 标识 事件 发 生 的 消息 ,消息 被 送 入 消息 队列 ,或 不 进入 队列 而 直接 发 送 
给 处 理 对 象 , 主 程序 负责 组 织 消 息 队列 ,将 消息 发 送 给 相应 的 处 理 程序 ,使 相应 的 处 理 程序 
执行 相应 的 动作 ,做 完 相 应 的 处 理 后 将 控制 权 交还 给 主 程序 ,这 就 是 事件 驱动 机 制 。 
Windows 就 采用 这 种 机 制 ,程序 的 设计 围绕 事件 模型 来 进行 。 在 这 种 机 制 中 ,对 象 的 请 求 
仅仅 是 向 队列 中 添加 相应 的 消息 , 耗 时 的 处 理 则 被 分 离 给 处 理 函 数 。 这 种 结构 的 程序 中 各 
功能 模块 界限 分 明 ,便于 扩充 ,能 充分 地 利用 CPU 的 处 理 能 力 , 使 系统 对 外 界 响 应 准确 而 
EH. 

事件 模型 由 事件 拥有 者 、 事 件 、 事 件 的 处 理 器 及 订阅 关系 这 4 个 部 分 组 成 ,以 button] 
按钮 对 象 为 例 ,说 明 如 下 。 

事件 的 拥有 者 就 是 button1( 按 钮 ); 事件 是 buttonl. Click; 事件 的 处 理 器 ,在 CS 代码 
中 是 buttonl_Click。 其 中 ,订阅 关系 是 通过 一 条 语句 ,让 事件 和 事件 处 理 器 建立 联系 。 请 
句 是 “this. buttonl. Click+ =new System. EventHandler( this. buttonl_Click); ”, 当然 ,一 
个 事件 也 可 以 定义 多 个 处 理 器 响应 。 最 后 一 个 响应 者 ,就 是 窗 体 本 身 。 

对 事件 模型 的 理解 ,还 有 一 种 提 法 是 事件 模型 三 要 素 。 三 要 素 分 别 是 指 事件 源 ,监听 器 
和 事件 处 理 程序 。 事 件 源 能 够 接收 外 部 事件 的 源 体 ; 监听 器 能 够 接收 事件 源 通知 的 对 象 ; 
事件 处 理 程序 用 于 处 理事 件 的 对 象 函数 。 根 据 事 件 驱动 模型 三 要 素 , 事 件 模 型 如 图 6. 3 
所 示 。 
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注册 /注销 
6.3 事件 模型 


6.2 路 由 事件 原理 


传统 的 事件 模型 中 ,在 消息 激发 时 ,消息 被 订阅 后 , 交 给 事件 的 响应 者 ,事件 的 响应 者 使 
用 事件 的 处 理 器 来 做 出 响应 。 既 然 . NET 中 已 经 有 事件 机 制 了 ,为 什么 在 WPF 中 引入 路 
由 事件 来 取代 事件 呢 ? 因为 WPF 采用 元 素 合 成 的 设计 思想 , WPF 有 LogicalTree 和 
VisualTree 两 棵 树 ,WPF 中 界面 元 素 可 能 是 由 多 个 元 素 合成 而 来 的 ,以 一 个 Button. 上 放置 
一 张 图 片 为 例 , 单 击 图 片 与 单 击 Button, 外 界 如 何 辨 别 是 谁 被 单 击 了 ? 这 就 需要 用 路 由 
事件 。 

在 过 去 的 事件 模型 中 ,事件 源 ( 事 件 的 宿主 ) 必 须 能 够 直接 访问 到 事件 的 响应 者 ,它们 是 
直接 的 订阅 关系 。 在 WPF 中 的 路 由 事件 中 ,事件 源 与 事件 的 响应 者 之 间 则 没有 直接 的 显 
式 订阅 关系 。 事 件 的 拥有 者 则 只 负责 激发 事件 ,事件 将 由 谁 响应 , 它 并 不 知道 ,事件 的 响应 
者 则 通过 事件 的 监听 器 , 当 有 此 类 事件 传递 过 来 后 ,事件 响应 者 就 使 用 事件 处 理 器 来 响应 事 
件 ,并 决定 此 事件 是 否 继续 传递 。 例 如 ,一 个 Button 被 * 单 击 ” 后 ,事件 被 触发 。 然 后 事件 就 
会 沿 着 逻辑 树 进行 传递 ,事件 的 响应 者 安装 了 监听 器 , 当 监 听 到 这 个 事件 进行 响应 ,并 决定 
这 个 事件 是 否 继续 传递 。 若 事件 在 某 个 结 点 处 理 以 后 ,不 想 让 它 继续 传递 ,可 以 把 它 标记 为 
“已 处 理 ”( 把 Handled 属性 设 为 true) , 则 路 由 事件 停止 传递 。 因 为 所 有 的 路 由 事件 都 共享 
一 个 公共 的 .事件 数据 基 类 RoutedEventArgs。RoutedEventArgs 定义 了 一 个 采用 布尔 值 
的 Handled 属性 。 


6.2.1 路 由 事件 机 制 


以 鼠标 右 击 传递 路 由 事件 为 例 , 设 计 从 外 向 内 依次 为 黄 、 红 、 粉 3 个 Grid iE «ob Ab 
放置 一 个 Button 按钮 ,XAML 页 面 显示 效果 如 图 6.4 所 示 。 
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6.4 路 由 事件 机 制 


该 页 面 的 XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 --> 
Title = "MainWindow" Height = "350" Width = "525" MouseUp = "Window MouseUp" > 
<Grid> 
<Grid Background = "Yellow" MouseUp = "Grid MouseUp" Name = "gridYellow"> 
«Grid Margin = "20" Background = "red" MouseUp = "Grid MouseUp" Name = "gridRed"> 
«Grid Margin = "20" Background = "Pink" MouseUp = "Grid  MouseUp" Name = 
"gridPink"» 
«Button x:Name = "button" Content = "Button" HorizontalAlignment = "Left" 
Margin = "182, 103, 0, 0" VerticalAlignment = "Top" Width = "75" 
Click- "button Click" MouseUp = "button MouseUp" /» 
«/Grid» 
«/Grid» 
«/Grid» 
«/Grid» 
«/ Window» 


在 后 台 用 CS 编写 相应 事件 的 代码 如 下 。 


private void Window MouseUp(object sender, MouseButtonEventArgs e) 
{ 
MessageBox. Show( "Window 被 点 击 "); 
MessageBox. Show(" 路 由 事件 结束 "); 
) 
private void Grid MouseUp(object sender, MouseButtonEventArgs e) 
{ 
Grid g = sender as Grid; 
MessageBox. Show(g. Name + "被 点 击 "); 
} 
private void button MouseUp(object sender, MouseButtonEventArgs e) 
{ 


FrameworkElement f = sender as FrameworkElement; 
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MessageBox. Show( f. Name + "被 点 击 "); 
//e. Handled = true; 
} 
private void button Click(object sender, RoutedEventArgs e) 
{ 
MessageBox. Show( ( (Button) sender). Name); 
} 


运行 上 述 代 码 , 显示 初始 页 面 如 图 6. 4 所 示 。 当 单 击 
Button 按钮 时 ,弹出 消息 框 ,如 图 6.5 所 示 。 单 击 “ 确 定 ” 按 钮 
后 ,button_Click 事件 终止 。 当 右 击 Button 按钮 ,触发 button_ 
MouseUp 事件 ,弹出 消息 框 如 图 6.6 所 示 。 单 击 图 6.6 中 的 
“确定 ”按钮 后 ,弹出 如 图 6.7 所 示 的 gridPink i$ B HE; 单 击 
图 6.7 中 的 “确定 ”按钮 后 ,弹出 如 图 6. 8 所 示 的 gridRed 消息 
框 ; 单 击 图 6. 8 中 的 “确定 ”按钮 后 ,弹出 如 图 6. 9 所 示 的 ”图 6.5 单 击 Button 消息 框 
gridYellow 消息 框 ; 单 击 图 6.9 中 的 “确定 ”按钮 后 ,又 弹出 如 
图 6. 10 所 示 的 Window 消息 框 ; 单 击 图 6. 10 中 的 “确定 ”按钮 后 ,弹出 如 图 6. 11 所 示 的 路 
由 事件 结束 消息 框 。 
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图 6.6 idi Button 消息 框 6.7 gridPink 消息 框 6.8 gridRed 消息 框 



































gridYellow 被 点 击 
| az 中 
图 6.9 gridYellow 消息 框 图 6.10 Window 消息 框 图 6.11 路 由 事件 结束 消息 框 
在 gridPink 处 单 击 ,会 依次 弹出 如 图 6.8 一 图 6. 11 所 示 的 消息 框 ; 在 gridRed 处 单 击 ， 


会 依次 弹出 如 图 6. 9 一 图 6. 11 所 示 的 消息 框 ; 在 gridYellow 处 单 击 ,会 依次 弹出 如 图 6. 10 一 
图 6.11 所 示 的 消息 框 。 

让 读者 疑惑 的 是 , 单 击 的 是 按钮 ,为 什么 所 有 的 Grid 和 Window 也 会 引发 事件 呢 ? 其 
实 这 就 是 WPF 路 由 事件 的 机 制 , 引 发 的 事件 由 源 元 素 逐 级 传 到 上 层 的 元 素 , 路 由 事件 会 沿 
着 逻辑 树 : button—> gridPink—> gridRed—> gridYellow—> Window, 4 A t button 时 ,触发 
button 的 Mouseup 路 由 事件 ,该 路 由 事件 沿 着 逻辑 树 向 上 传播 ,触发 Grid 的 MouseUp 路 
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由 事件 ,继续 向 上 ,直到 最 外 层 Window 的 MouseUp 后 ,路 由 事件 终止 。 


若 想 在 图 6. 7 消息 框 弹出 后 就 终止 路 由 , 则 需要 修改 在 Grid MouseUp 中 的 Handled 
属性 值 为 true。 后 台 CS 代码 中 修改 如 下 。 


private void Grid MouseUp(object sender, MouseButtonEventArgs e) 


{ 
Grid g= sender as Grid; 
MessageBox. Show(g. Name + "被 点 击 "); 
e. Handled- true; 
) 


在 第 1 章 中 就 提 及 了 WPF 的 逻辑 树 , 接 下 来 通过 逻辑 树 来 深入 理解 WPF 路 由 事件 调 
用 机 制 。 设 计 页 面 如 图 6. 12 所 示 , 其 XAML 代码 如 下 所 示 。 图 6. 12 路 由 事件 页 面 的 
LogicalTree 结构 如 图 6. 13 所 示 。 




































































[5 mai. ET 二 | 
| Window 
gridYellow 
gridRed 
topStack bottomStack 
topButton bottomButton 
图 6.12 路 由 事件 页 面 图 6.13 路 由 事件 页 面 的 LogicalTree 结构 


<! -- 保留 Window 代码 部 分 --> 
<Grid> 
< Grid x:Name = "gridYellow" Background = "Yellow" > 
< Grid x:Name = "gridRed" Margin = "10" Background = "Red" > 
< Grid. RowDef initions > 
< RowDef inition/» 
< RowDef inition/» 
«/Grid. RowDef initions > 
«StackPanel x: Name = "topStack" Grid. Row = "0" Background = "Pink" Margin = 
"10"> 
«Button x:Name = "topButton" Content = "Top" Width = "90" Height = "100" 
Margin = "15" /> 
«/StackPanel > 
«StackPanel x:Name = "bottomStack" Grid. Row = "1" Background = "Pink" Margin 
= "10" > 
«Button x: Name = "bottomButton" Content = "Bottom" Width = "90" Height = 
"100" Margin = "15" MouseUp = "bottomButton MouseUp" /» 
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</StackPanel > 
</Grid> 
</Grid> 
</Grid> 
</Window> 


在 后 台 编 写 Grid MouseUp,bottomStack MouseUP 和 bottomButton_MouseUp +% 
路 由 事件 ,CS 代码 如 下 。 


private void Grid MouseUp(object sender, MouseButtonEventArgs e) 
f 
Grid g = sender as Grid; 
MessageBox. Show(g. Name + "被 点 击 "); 
} 
private void bottomStack MouseUP(object sender, MouseButtonEventArgs e) 
{ 
StackPanel s = sender as StackPanel; 
MessageBox. Show( s. Name + "被 点 击 ") ; 
} 
private void bottomButton MouseUp(object sender, MouseButtonEventArgs e) 
{ 
MessageBox. Show( ( (Button) sender). Name + "被 点 击 "); 
} 


运行 上 述 代 码 , 右 击 bottomButton 按钮 ,没有 响应 。 前 个 案例 中 ,是 在 前 台 XAML 页 
面 编写 了 路 由 事件 。 实 现 右 击 后 ,激活 路 由 有 关 MouseUp 路 由 事件 ,实现 沿 逻 辑 树 向 上 传 
播 。 接 下 来 ,在 后 台 窗 体 构造 器 中 添加 的 CS 代码 如 下 。 


public MainWindow() 
t 
InitializeComponent(); 
gridYellow. AddHandler(UIElement.MouseUpEvent, 
new MouseButtonEventHandler(Grid MouseUp)); 
gridRed. AddHandler(UIElement.MouseUpEvent, 
new MouseButtonEventHandler(Grid MouseUp)); 
bottomStack. AddHandler(UIElement.MouseUpEvent, new 
MouseButtonEventHandler(bottomStack MouseUP)); 


) 
运行 上 述 代码 , 右 击 bottomButton 按钮 ,依次 弹出 如 图 6. 14 一 图 6. 17 所 示 的 消息 框 。 
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6.14 bottomButton 消息 框 图 6.15 bottomStack 消息 框 
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读者 看 到 ,调用 UlElement. AddHandler( ) 方 法 是 为 了 把 监听 的 事件 与 事件 处 理 器 关 
联 起 来 。AddHandler( ) 方 法 源 自 UIElement 类 ,该 方法 的 第 一 个 参数 是 UIElement 
. MouseUpEvent, 这 就 意味 着 ,路 由 事件 本 身 是 一 个 RoutedEvent 类 型 的 静态 成 员 变量 。 

在 用 AddHandler() 方 法 创建 委托 类 型 (如 MouseButtonEvent Handler) ,不 能 隐 式 地 创 
建委 托 对 象 。 原 因 是 UIElement. AddHandler() 方 法 支持 所 有 的 WPF 事件 , 它 并 不 知晓 用 
户 想 要 使 用 的 委托 类 型 。 


6.2.2 RoutedEventArgs 类 


上 述 路 由 事件 中 ,sender 参数 为 路 由 事件 的 传播 提供 引用 ,在 有 些 情况 下 ,需要 确定 事 
件 最 初 发 生 的 位 置 。 可 以 通过 RoutedEventArgs 类 的 属性 得 到 细节 信息 。 因 为 所 有 的 
WPF 事件 参数 类 继承 自 RoutedEventArgs, 任 何事 件 处 理 程序 都 可 以 使 用 这 些 属性 , 表 6.1 
列 出 了 RoutedEventArgs 的 属性 含义 。 


表 6.1 RoutedEventArgs 类 的 属性 


属 性 名 £ x 
Source 触发 事件 的 对 象 
引发 事件 的 初始 对 象 。 通常 其 与 Source 的 属性 相同 。 但 在 某 些 情况 下 ， 
OriginalSource 属性 指向 更 深 的 层次 ,以 获得 作为 更 高 一 级 元 素 一 部 分 的 后 台 元 素 
通过 事件 处 理 程序 为 触发 事件 提供 RoutedEvent 对 象 (如 静态 的 UIElement 
.MouseUpEvent) 。 当 使 用 同一 事件 处 理 程序 处 理 不 同 的 事件 时 ,该 信息 极为 重要 
Handled 用 于 终止 路 由 事件 。Handled 属性 为 true 时 ,路 由 事件 终止 








OriginalSource 





RoutedEvent 








传统 的 . NET Event 机 制 就 是 单纯 的 委托 ,而 RoutedEvent 则 提供 了 在 Logical Tree 
中 路 由 事件 的 能 力 。 


6.2.3 路 由 策略 


到 目前 为 止 ,所 有 的 路 由 事件 都 是 冒 泡 路 由 事件 ,WPF 中 的 路 由 策略 除了 骨 泡 ,还 有 隧 
道 和 直接 模式 。 

(1) EW (Bubbling): 由 事件 源 沿 着 逻辑 树 向 上 传递 ,直到 根 元 素 。 

(2) 隧道 (Tunneling): 与 冒 泡 相反 ,从 元 素 树 的 根部 调用 事件 处 理 程 序 并 依次 向 下 深 
入 直到 事件 源 。 一 般 情况 下 , WPF 提供 的 输入 事件 都 是 以 隧道 / 冒 泡 对 实现 的 。 例 如 ， 
PreviewKeyDown 事件 将 首先 从 项 级 窗 体 开 始 触发 ,直到 获得 用 户 焦点 所 在 的 元 素 上 。 隧 
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道 事件 的 命名 要 求 以 Preview 开头 ,故常 被 称 为 Preview 事件 。 

(3) 直接 (Direct) : 只 有 事件 源 才 有 机 会 响应 事件 ,就 是 CLR 事件 。 

现在 对 图 6. 12 中 的 topButton 按钮 来 编写 隧道 模式 的 路 由 事件 。 先 在 后 台 编写 
topButton_PreviewMouseDown 事件 ,该 事件 的 CS 代码 如 下 。 


private void topButton PreviewMouseDown(object sender, MouseButtonEventArgs e) 
{ 

MessageBox. Show( sender. GetType( ). ToString()); 
} 


接 下 来 写 前 台 的 XAML 代码 , 因 后 台 已 编写 topButton_PreviewMouseDown 路 由 事 
fr , 故 在 前 台 添 加 PreviewMouseDown, 再 编写 topButton_PreviewMouseDown 事件 处 理 程 
序 (建议 根据 系统 的 智能 提示 选择 该 事件 的 处 理 程序 ) ,XAML 代码 如 下 。 


< Window x:Class = "RoutedEventMechanisml. MainWindow" 
xmlns = "http://schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x = "http://schemas. microsoft. com/winfx/2006/xaml" 
Title = "MainWindow" Height = "350" Width= "525" 
PreviewMouseDown = "topButton_PreviewMouseDown" > 
<Grid> 
< Grid x:Name = "gridYellow" Background = "Yellow" 
PreviewMouseDown = "topButton PreviewMouseDown"> 
< Grid x:Name = "gridRed" Margin = "10" Background = "Red" > 
< Grid. RowDefinitions > 
< RowDefinition/> 
< RowDefinition/> 

</Grid. RowDefinitions > 

< StackPanel x:Name = "topStack" Grid. Row = "0" Background = "pink" 

Margin = "10" PreviewMouseDown = "topButton_PreviewMouseDown" > 

< Button x:Name = "topButton" Content = "Top" Width = "90" Height = "100" 
Margin = "15" PreviewMouseDown = "topButton_PreviewMouseDown" /> 
«/StackPanel > 
< StackPanel x:Name = "bottomStack" Grid. Row = "1" Background = "Pink" 
Margin = "10" > 
< Button x:Name = "bottomButton" Content = "Bottom" Width = "90" 
Height = "100" Margin = "15" /> 
</StackPanel > 
</Grid> 
</Grid> 
</Grid> 
</Window> 


运行 上 述 代 码 , 右 击 topButton 按钮 后 ,依次 弹出 如 图 6. 18 一 图 6. 21 所 示 的 消息 框 。 








RoutedEventMechanism1.MainWindow System.Windows.Controls.Grid 


Le | 


一 3 


























图 6.18 MainWindow 消息 框 图 6.19 Grid 消息 框 
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System. Windows.Controls.StackPanel System. Windows.Controls.Button 


























图 6.20 StackPanel 消息 框 6.21 Button 消息 框 


隧道 模式 路 由 事件 会 沿 着 逻辑 树 从 Main Window Grid— StackPanel- Button, 44 
ili topButton 时 ,触发 topButton | PreviewMouseDown 的 隧道 路 由 事件 。 隧 道 模式 路 由 事 
件 沿 着 逻辑 树 从 最 外 层 的 MainWindow 开始 ,向 下 传播 ,直到 最 内 层 的 topButton 后 ,路 由 
事件 终止 。 

直接 模式 路 由 事件 就 是 CLR 事件 ,在 此 不 再 举例 说 明 。 隧 道 模式 和 骨 泡 模式 事件 对 
比 , 如 图 6. 22 所 示 。 


PreviewMouseUp 





MouseUpfi fF 
冒 泡 事件 


6.22 ”隧道 模式 事件 与 冒 泡 模 式 事件 对 比 


6.3 自 定 义 路 由 事件 


为 了 便于 程序 中 对 象 间 通信 ,用户 常 常 需要 自 定 义 一 些 路 由 事件 。 自 定义 路 由 事件 可 
分 为 下 列 3 个 步骤 。 

COD 声明 并 注册 路 由 事件 。 

(2) 为 路 由 事件 添加 CLR 事件 包装 。 

(3) 创建 激发 路 由 事件 的 方法 。 

下 面 自 定义 一 个 WPF 路 由 事件 ,该 事件 是 冒 泡 式 路 由 事件 ,其 功能 是 : 单 击 页 面 中 的 
按钮 后 ,给 出 当前 时 间 及 冒 泡 路 由 的 控件 。 该 路 由 事件 具有 两 个 参数 , 先 来 创建 类 ,让 其 继 
承 自 RoutedEventArgs 类 ,该 类 名 为 RecordingTimeEventArgs。 该 类 的 CS 代码 如 下 。 

class RecordingTimeEventArgs:RoutedEventArgs 


{ 
public RecordingTimeEventArgs ( RoutedEvent routedEvent, object source) : base 
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(routedEvent，source) { } 
public DateTime ClickTime { get; set; } 
) 


再 创建 一 个 类 ,类 名 为 TimerButton ,其 继承 自 Button 类 。 在 该 类 中 实现 自 定 义 路 由 
事件 时 ,遵照 上 述 所 说 的 “ 自 定义 路 由 事件 的 3 个 步骤 ”。 


class TimerButton:Button 
i 
// 声 明 注册 路 由 事件 
public static readonly RoutedEvent RecordingTimeEvent = EventManager. RegisterRoutedEvent 
("RecordingTime" , RoutingStrategy. Bubble, typeof ( EventHandler < RecordingTimeEventArgs >), 
typeof(TinerButton)); 
//CLR 事件 包装 
public event RoutedEventHandler RecordingTime 
( 
add ( this. AddHandler(RecordingTimeEvent, value); } 
remove ( this. RemoveHandler(RecordingTimeEvent, value ); ) 
) 
// 激 发 路 由 事件 ,借用 Click 事件 的 激发 方法 
protected override void OnClick() 
{ 
base. OnClick(); // 保 证 Button 原 有 功能 正常 使 用 ,Click 事件 被 激发 
RecordingTimeEventArgs args = new RecordingTimeEventArgs (RecordingTimeEvent, 
this); 
args. ClickTime = DateTime. Now; 
this.RaiseEvent(args); //UIElement 及 其 派生 类 


} 


对 上 述 声明 注册 路 由 事件 的 4 个 参数 说 明 如 下 。 
第 1 个 参数 : RecordingTime 为 路 由 事件 的 名 称 。 
第 2 个 参数 : RoutingStrategy. Bubble 是 路 由 事件 的 冒 泡 策略 ,共有 3 种 策略 分 别 是 
Bubble 冒 泡 模式 Tunnel 隧道 模式 和 Direct 直接 模式 。 
第 3 个 参数 : typeof(EventHandler < RecordingTimeEventArgs >) 指 定 事件 处 理 器 的 
类 型 。 
第 4 个 参数 : typeof(TimerButton) 指 定 事件 的 宿主 类 型 。 
现在 开始 布局 前 台 页 面 ,页 面 的 效果 如 图 6. 23 所 示 ,其 前 台 页 面 的 XAML 如 下 。 
< Window x:Class = "CustomRoutedEvent. MainWindow" 
xmlns = "http://schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x= "http: //schemas. microsoft. com/winfx/2006/xaml" 
xmlns:local = "clr - namespace:CustomRoutedEvent" 
local:TimerButton. RecordingTime = "RecordingTimeHandler" 
Title = "MainWindow" Height = "350" Width = "525"> 
< Grid x:Name = "yellowGrid" Background = "Yellow" 
local:TimerButton. RecordingTime = "RecordingTimeHandler"> 
< Grid x:Name = "pinkGrid" Background = "Pink" Margin = "20" 
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local:TimerButton. RecordingTime = "RecordingTimeHandler"> 
< StackPanel x:Name = "stackPanell" 
local:TimerButton. RecordingTime = "RecordingTimeHandler"> 
<local:TimerButton x:Name = "timeButton" Content = " 冒 泡 路 由 事件 报告 计时 器 " 
local:TimerButton. RecordingTime = "RecordingTimeHandler" 
Height = "28" Width = "202" /> 
« ListBox x:Name = "timeListBox" Height = "213" /> 
«/StackPanel » 
«/Grid» 
«/Grid» 


«/Window > 


后 台 编 写 RecordingTimeHandler 方法 ,该 方法 的 CS 代码 如 下 。 


public MainWindow() 
{ 
InitializeComponent(); 
) 
private void RecordingTimeHandler(object sender, RecordingTimeEventArgs e) 
{ 
FrameworkElement element = (FrameworkElement) sender; 
string timeStr = e.ClickTime. ToString("HH:mm:ss"); 
string content = string.Format("(0) $35 (1) BI [H] : ", timeStr, element.Name); 
this.timeListBox. Items. Add(content); 
类 


运行 完整 的 代码 ,在 单 击 图 6. 23 中 的 按钮 后 ,页面 运行 效果 如 图 6. 24 所 示 。 在 时 间 列 
表 框 (timeListBox) 中 显示 自 定 义 冒 泡 路 由 事件 时 间 顺 序 : timeButton 一 stackPanell 一 
pinkGrid>yellowGrid。 从 里 向 外 ,并 记录 冒 泡 的 时 间 。 再 次 单 击 “ 冒 泡 路 由 事件 报告 计时 
器 ”按钮 ,在 timeListBox 列表 框 中 继续 显示 本 次 的 冒 泡 过 程 及 时 间 。 





























6.24 自 定义 路 由 事件 响应 Button 事件 


6.4 附加 事件 


WPF 中 还 有 一 种 一 一 附加 事件 ,正如 前 面 说 的 路 由 事件 的 宿主 都 是 可 以 看 到 的 界面 元 
素 , 但 是 附加 事件 不 具备 在 用 户 界面 上 显示 的 能 力 , 如 一 个 文本 框 的 改变 、 鼠 标的 按 下 键盘 
的 按 下 。 当 然 ,“ 附 加 事件 ”也 是 路 由 事件 ,常见 类 及 其 对 应 的 附加 事件 如 下 。 

。 Binding 类 : SourceUpdated 事件 、TargetUpdated 事件 ; 

* Mouse 类 : MouscEnter 事件 ,MouseLeave 事件 .MouseDown 事件 ,MouseUp 事件 等 ; 

* Keyboard 类 : KeyDown 事件 .KeyUp 事件 等 。 


6.5 小 结 


本 章 从 Windows 操作 系统 的 消息 机 制 出 发 ,介绍 了 事件 模型 ,由 于 WPF 的 合成 特性 、 
内 容 模 型 ,其 引入 路 由 事件 机 制 ,并 采用 骨 泡 、 隧 道 .直接 3 种 策略 。 用 户 可 以 通过 自 定义 路 
由 事件 , 写 出 紧凑 、 组 织 良 好 的 代码 ,实现 用 户 需求 。 


习题 与 实验 6 


1. 简 述 消息 处 理 机 制 .事件 模型 及 数据 驱动 UI, 寻 找 它们 在 生活 中 的 应 用 实例 。 

2. 对 比分 析 路 由 事件 与 普通 CLR 事件 的 区 别 。 

3. 路 由 事件 的 优点 是 什么 ? 

4. 实现 自 定义 路 由 事件 ,分 别 用 隧道 、 冒 泡 和 直接 3 种 策略 实现 。 隧 道 策略 弹出 页 面 
的 顺序 如 图 6. 25 所 示 。 冒 泡 策 略 的 弹出 页 面 的 顺序 如 图 6. 26 所 示 。 

操作 提示 : 文档 结构 如 图 6.27 所 示 。 其 中 ,DetailReportButton 类 由 Button 派生 , 它 
包含 定义 路 由 事件 、CLR 事件 包装 和 事件 的 触发 方法 。DetailReportEventArgs 是 
RoutedEventArgs 的 派生 类 。 前 台 XAML 页 面 的 Logical Tree 如 图 6. 28 所 示 。 











6.26 隧道 策略 的 弹出 页 面 顺 序 
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图 6.27 本 题 文档 结构 6.28 XAML 页 面 的 Logical Tree 


由 图 6. 28 可 知 ,MainWindow. xaml 的 页 面 嵌 套 了 3 个 Grid, H Grid 的 名 称 从 外 向 内 ， 
分 别 是 Grid_FirstLayer、Grid_SecondLayer 和 Grid_ThirdLayer。 最 内 层 Grid 布局 中 还 有 
一 个 DetailReportButton ,其 名 称 是 Button_Confirm 。 





图 形 基础 


在 第 1 章 读者 已 经 知道 WPF 集成 了 2D 矢量 图 .光栅 图 片 ,文本 .音频 视频、 动画.3D 
图 形 , 所 有 这 些 特 性 都 构建 在 DirectX 之 上 。 从 本 章 开 始 ,读者 需 学 习 WPF 的 图 形 系统 。 

WPF 设计 中 的 基本 设计 原则 是 元 素 合成 的 思想 。 元 素 合成 的 思想 已 融入 WPF 的 图 
形 系统 中 。 本 章 从 WPF 图 形 原则 开始 ,然后 讲解 2D 和 3D 图 形 的 要 素 。 


7.1 WPF 图 形 原 则 


WPF 图 形 原则 秉承 元 素 合成 的 设计 思想 ,WPF 的 应 用 程序 与 分 辩 率 无 关 ( 即 应 用 程序 
不 管 设备 的 分 辩 率 是 多 少 ,运行 的 效果 都 是 一 样 的 ) 。 

IA WPF 的 应 用 程序 为 什么 与 分 辨 率 无 关 呢 ? 因为 WPF 的 坐标 并 不 是 物理 像素 ,而 
是 逻辑 像素 。 它 使 用 的 坐标 系统 等 于 1/96 英寸 。 

WPF 的 图 形 系统 是 基于 变换 X 和 Y 坐标 值 来 表示 位 置 。 常 见 的 3 个 变换 对 元 素 
CTranslateTransform ,ScaleTransform 和 RotateTransform) 进 行 定位 改变 尺寸 及 旋转 。 


7.1.1 几何 图 形 与 笔 刷 


1. 几何 图 形 

在 WPF 中 ,Geometry( 几 何 图 形 ) 是 所 有 2D 图 形 的 基础 。PathGeometry( 路 径 几 何 图 
形 ) 又 是 所 有 其 他 几何 图 形 的 集合 。 故 此 先 来 了 解 Path( 路 径 ) 。 

路 径 是 由 一 系列 的 图 案 构成 的 。 每 个 图 案 又 是 由 一 组 线段 构成 的 。WPF 中 的 线段 有 
LineSegment, BezierSegment 和 ArcSegment。 其 中 ,最 简单 的 线段 是 LineSegment。 线 段 
都 需要 有 起 点 , 当 路 径 封闭 时 ,设置 “IsClosed 一 "True"” 即 可 。 

现在 使 用 Path 形状 ,定义 封闭 的 路 径 。XAML 代码 如 下 。 


<Grid> 
<Path Fill = "Pink" Stroke = "Yellow" 
StrokeThickness = "4"> 
<Path. Data> 
<PathGeometry> 
< PathGeometry. Figures> 
< PathFigure StartPoint = "28,10" IsClosed= "True" > 
<LineSegment Point = "10,20"/> 
< LineSegnent Point = "20,40"/> 
< LineSegnent Point = "40,70" /» 
< LineSegnent Point = "70,80" /> 








< LineSegnent Point = "80,120"/> 
< LineSegnent Point = "120, 10"/> 
</PathFigure> 
</PathGeometry. Figures> 
</PathGeometry > 
</Path. Data > 
«/Path» 
«/Grid» 
«/Window» 


运行 上 述 代 码 ,页 面 显示 效果 如 图 7. 1 所 示 。 

下 面 来 认识 贝 塞 尔 线段 (BezierSegment) 。 使 用 它 时 ,需要 通过 两 
个 控制 点 (Pointl 和 Point2) 和 一 个 结束 点 (Point3) 来 定义 一 个 贝 塞 尔 
曲线 (Beziercurve) 。XAML 代码 如 下 。 


< PathGeometry. Figures > 
< PathFigure StartPoint = "90,5" IsClosed = "True" > 





<LineSegment Point = "10, 10"/> 图 7.1 LineSegment 
< BezierSegment Pointl = "260, 40" Point2 = "400, 430" 页 面 显示 效果 
Point3 = "700,300"IsSmoothJoin = "True"/> 
</PathFigure> 


</PathGeometry. Figures > 


运行 上 述 代码 ,页面 显示 效果 如 图 7.2 所 示 。 





图 7.2 BezierSegment 页 面 显 示 效 果 


接 下 来 再 认识 弧 线 段 (ArcSegment)。 弧 线段 是 用 于 产生 一 个 给 定 尺寸 的 椭圆 。 在 贝 
塞 尔 线段 (BezierSegment) 的 基础 上 实现 椭圆 效果 ,XAML 代码 如 下 。 


< PathFigure StartPoint = "90,5" IsClosed= "True" > 
< LineSegment Point = "10, 10"/> 
<BezierSegment Point1 = "260, 40" Point2 = "400, 430" Point3 = "700, 300" IsSmoothJoin = 
"True" /> 
<ArcSegment Point = "70, 100" Size = "65,55" IsLargeArc = "False" SweepDirection = 
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"Clockwise" /> 
</PathFigure> 
运行 上 述 代码 ,页 面 显 示 效 果 如 图 7. 3 所 示 。 若 在 </PathFigure > 前 加 上 Quadratic- 
BezierSegment 的 对 象 约束 ,语句 内 容 *< QuadraticBezierSegment Pointl — "80.45" Point2 = 
"9,79"/>”, 再 运行 代码 ,页 面 显 示 效果 如 图 7.4 所 示 。 





7.3  ArcSegment 页 面 显示 效果 





7.4 QuadraticBezierSegment 页 面 显示 效果 


几何 图 形 中 除了 上 述 所 说 的 各 种 线段 外 ,还 有 CombineGeometry 和 GeometryGroup 
两 个 混合 几何 图 形 。 
CombineGeometry 用 来 创建 新 的 单独 的 几何 图 形 ,使 用 GeometryCombineMode 决定 


E. 
系统 组 合 几何 图 形 的 模式 ,最 终结 果 的 外 部 轮廓 会 被 匀 勒 出 来 。 下 面 观察 不 同 模式 下 的 组 
合 几何 图 形 。 


<Grid> 
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« Path Stroke = "Yellow" StrokeThickness = "1" Fill = "Pink" > 
< Path. Data» 
< ConbinedGeometry GeometryCombineMode = "Exclude"» 
< ConbinedGeometry. Geometryl > 
< EllipseGeometry RadiusX = "40" RadiusY = "40" Center = "75,75" /> 
</CombinedGeometry. Geometry1 > 
< CombinedGeometry. Geometry2 > 
< EllipseGeonetry RadiusX = "40" RadiusY = "40" Center = "125,75" /> 
«/ConbinedGeometry.Geometry2 > 
«/ConbinedGeonetry > 
«/Path. Data » 
«/Path» 
«/Grid» 
«/Window 


运行 上 述 代码 ,页 面 显 示 效 果 如 图 7. 5 HER, 4" GeometryCombineMode = " Intersect "" 


时 ,页 面 显示 效果 如 图 7.6 所 示 ; 24" GeometryCombineMode — " Union" "Ij ,页面 显 示 效 果 
如 图 7.7 所 示 ; 当 “GeometryCombineMode 二 "Xor"” 时 ,页 面 显示 效果 如 图 7. 8 所 示 。 





图 7.5 Exclude 图 7.6 Intersect 
图 7.7 Union 7.8 Xor 


GeometryGroup( 几 何 组 合 ) 继 承 自 Geometry 类 。Geometry 类 除 含 几何 组 合 外 ,还 包含 几 
何 线条 (LineGeometry) ,JL faf JE CRectangleGeometry) 、 几 何 椭圆 图 形 (EllipesGeometry)、 几 何 
路 径 (PathGeometry)。 该 类 用 来 描述 任何 几何 的 2D 形状 。 从 绘图 角度 来 看 ,Geometry 类 
和 Share 类 都 用 来 绘制 2D 图 形 ,但 是 Geometry( 几 何 绘图 ) 绘 图 效率 高 于 Share 类 。 

在 GeometryGroup 中 创建 3 个 EllipseGeometry, 填 充 规则 是 EvenOdd. XAML 代码 
如 下 


<Grid> 
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< Path Stroke = "Yellow" StrokeThickness = "1" Fill = "Pink" > 
< Path. Data > 
< GeometryGroup FillRule = "Even0dd" > 
< EllipseGeometry Center = "40,70" RadiusX = "30" RadiusY = "30" /> 
< EllipseGeometry Center = "70,70" RadiusX = "30" RadiusY = "30" /> 
< EllipseGeometry Center = "50,40" RadiusX = "30" RadiusY = "30" /> 
«/GeonetryGroup > 
«/Path. Data» 
«/Path» 
«/Grid» 
</Window> 


运行 上 述 代 码 ,页 面 显示 效果 如 图 7.9 所 示 。 将 填充 规则 换 成 Nonzero 后 ,运行 上 述 代 
码 ,页面 显示 效果 如 图 7. 10 所 示 。 


i. i 
e g) 


图 7.9 EvenOdd 图 7.10 Nonzero 


在 上 述 代 码 中 再 加 入 一 个 RectangleGeometry, 将 填充 规则 修改 为 EvenOdd,XAML 代 
码 如 下 。 


< GeometryGroup FillRule = "EvenOdd" > 
< EllipseGeometry Center = "40,70" RadiusX = "30" RadiusY = "30" /> 
< EllipseGeometry Center = "70,70" RadiusX = "30" RadiusY = "30" /> 
< EllipseGeonetry Center = "50,40" RadiusX = "30" RadiusY = "30" /> 
< RectangleGeometry Rect = "5,88 100 38" /> 

«/GeometryGroup > 


运行 上 述 代 码 ,页 面 显示 效果 如 图 7. 11 所 示 。 将 填充 规则 换 成 Nonzero 后 ,运行 代码 ， 
页 面 显示 效果 如 图 7. 12 所 示 。 





图 7.11 组 合 Nonzero 图 7.12 组 合 EvenOdd 


2. 笔 刷 
笔 刷 (Brush) 是 向 系统 发 出 在 特定 区 域内 绘制 像素 的 命令 。 在 有 些 示例 中 ,这 个 区 域 
是 对 路 径 的 填充 。WPF 有 6 种 笔 刷 : SolidColorBursh 、LinearGradientBrush ImageBrush 、 








RadialGradientBrush、DrawingBrush、VisualBrush。 下 面 分 别 用 前 4 种 笔 刷 对 和 矩形 框 填充 。 
4 种 笔 刷 对 应 的 效果 如 图 7. 13 一 图 7. 16 所 示 。 





图 7.13 单 色 笔 刷 图 7.14 线性 渐变 笔 刷 
图 7.15 径 向 渐变 笔 刷 图 7.16 图 像 笔 刷 


(D) SolidColorBursh( 单 色 笔 刷 ) 的 XAML 代码 如 下 。 








<Grid> 
« Rectangle Width= "95" Height = "85"> 
« Rectangle. Fill» 
< SolidColorBrush Color = "Orange" /> 
«/Rectangle. Fill» 
«/Rectangle» 
«/Grid» 
«/Window > 


(2) LinearGradientBrush( 线 性 渐变 笔 刷 ) 的 XAML 代码 如 下 。 


<Grid> 
« Rectangle Width = "95" Height = "85"> 
< Rectangle.Fill^ 
< LinearGradientBrush» 
< GradientStop Color = "Red" Offset = "0.0" /> 
< GradientStop Color = "Orange" Offset = "0.6" /» 
< GradientStop Color = "Yellow" Offset = "1.0" /> 
«/LinearGradientBrush- 
«/Rectangle. Fill» 
«/Rectangle 
«/Grid» 
</Window> 


(3) RadialGradientBrush( 径 向 渐变 笔 刷 ) 的 XAML 代码 如 下 。 


< Rectangle Width = "95" Height = "85"> 


128^ wpF 编程 基础 





< Rectangle. Fill > 
< RadialGradientBrush GradientOrigin = "0.75, 0. 25"> 
< GradientStop Color = "Red" Offset = "0.0" /> 
< GradientStop Color = "Orange" Offset = "0.6" /> 
< GradientStop Color = "Yellow" Offset = "1.0" /> 
</RadialGradientBrush > 
«/Rectangle. Fill > 
</Rectangle > 


(4) ImageBrush [E f£ ^E ll Dj XAML 代码 如 下 。 


« Rectangle Width- "75" Height - "75"» 
<Rectangle. Fill > 
< ImageBrush ImageSource = "Images M£ lower. jpg" /> 
«/Rectangle. Fill» 
«/Rectangle > 


3. 画笔 

画笔 (Pen) 用 来 勾勒 出 几何 形状 的 轮廓 ,是 由 笔 刷 和 笔 的 精细 度 组 成 的 。 在 诸多 示例 
中 ,容器 元 素 的 属性 与 画笔 的 属性 是 一 致 的 。 例 如 ,画笔 在 矩形 填充 时 ,使 用 StrokeThickness、 
StrokeDashArray 和 Stroke 等 属性 ; 在 绘制 边框 时 ,使 用 BorderBrush 和 BorderThickness 
这 两 个 属性 。 


7.1.2 绘制 图 画 


在 了 解 几 何 图 形 、. 笔 刷 及 画笔 的 基础 上 ,再 来 认识 绘制 图 画 (Drawing)。 绘 制图 画 通过 
自己 的 共享 机 制 (Sharing) 将 显示 特性 变 成 为 绘制 图 画 对 象 , 并 赋予 它 一 个 矩形 的 几何 
形状 。 

到 目前 为 止 ,章节 中 出 现 的 概念 都 是 围绕 着 树 (Logical Tree 或 Visual Tree) 来 讲解 的 。 
但 是 绘制 图 画 引 入 了 图 结构 (Graph Structure) 。 图 结构 允许 在 图 中 多 处 显示 单独 的 一 幅 图 
画 , 以 提高 性 能 。 

下 面 演示 共享 模型 。 先 定义 一 个 Ellipse 几何 图 形 ,使 用 sharing 变量 来 共享 。 再 定义 
两 个 DrawingGroup 对 象 ,把 sharing 作为 它们 的 子 对 象 。 其 中 用 到 的 EllipseGeometry 对 
象 和 生成 结果 的 GeometryDrawing 都 只 被 定义 了 一 次 。 接 下 来 ,该 图 形 可 以 在 两 个 不 同 的 
上 下 文中 共享 。 在 此 ,每 个 DrawingGroup 实例 都 使 用 了 这 个 绘制 图 画 对 象 ,并 在 上 面 设置 
了 TranslateTransform 。 其 中 ,XAML 代码 只 有 一 条 语句 < Ellipse | x: Name— "ellipse"/7, Jri 
台 CS 代码 如 下 。 


public MainWindow() 
{ 
InitializeComponent(); 
GeometryDrawing sharing = new GeometryDrawing(Brushes. Green, 
null, new EllipseGeometry(new Rect(8, 8, 10, 10))); 
DrawingGroup a = new DrawingGroup(); 
DrawingGroup b = new DrawingGroup(); 
DrawingGroup c 7 new DrawingGroup(); 
a. Children. Add(sharing); 
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a. Transform = new TranslateTransform(0,0); 
b. Children. Add( sharing); 
b. Transform = new TranslateTransform(9,9); 
c. Children. Add(b); 
c. Children. Add(a) ; 
DrawingBrush brush = new DrawingBrush(); 
brush. Drawing = c; 
brush. Viewport = new Rect(0,0, 30,30) ; 
brush. ViewportUnits = BrushMappingMode. Absolute; 
brush. TileMode = TileMode. FlipXY; 
ellipse. Fill = brush; 

} 


运行 上 述 代 码 ,页面 显示 效果 如 图 7.17 所 示 。 
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7.17. 笔 刷 与 几何 图 形 绘制 页 面 效果 

















绘制 图 画 (Drawing) 描 述 一 些 可 见 内 容 , 如 形状 .位 图 .视频 或 一 行文 本 。 不 同类 型 的 
绘图 对 象 描绘 的 是 不 同类 型 的 内 容 。WPF 具有 5 种 不 同类 型 对 象 。 这 5 种 类 型 分 别 是 
GlyphRunDrawing,GeometryDrawing,ImageDrawing, VideoDrawing 和 DrawingGroup., 

现在 使 用 WPF 的 多 个 绘图 对 象 来 构建 一 幅 图 像 ,XAML 代码 如 下 。 


< Image> 
< Image. Source> 
<DrawingImage > 
<DrawingImage. Drawing > 
<! —— A group of various geometries 一 一 > 
< DrawingGroup > 
< GeonetryDrawing > 
< GeonetryDrawing. Geometry > 
< GeometryGroup > 
< RectangleGeometry Rect = "0,0,20,20" /> 
< RectangleGeometry Rect = "160, 120, 20,20" /> 
< EllipseGeometry Center = "75,75" RadiusX = "50" RadiusY = "50" /> 
< LineGeonetry StartPoint = "75,75" EndPoint = "180,0" /> 
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</GeometryGroup > 
</GeometryDrawing. Geometry > 
<! —— A custom pen to draw the borders -一 > 


< GeonetryDrawing. Pen > 
«Pen Thickness = "10" LineJoin = "Round" EndLineCap = "Triangle" StartLineCap = 
"Round" DashStyle = "(x:Static DashStyles.DashDotDot]" > 
< Pen. Brush» 
< LinearGradientBrush-? 
< GradientStop Offset = "0.0" Color = "Red" /> 
< GradientStop Offset = "1.0" Color = "Green" /> 
«/LinearGradientBrush» 
«/Pen. Brush» 
</Pen > 
</GeometryDrawing. Pen > 
</GeometryDrawing > 
</DrawingGroup > 
</DrawingImage. Drawing> 
</DrawingImage > 
</ Image. Source> 
</Image> 
</Window > 


运行 代码 ,页 面 显示 效果 如 图 7. 18 所 示 。 从 上 述 代码 中 可 以 看 到 ,使 用 了 DrawingGroup、 
GeometryDrawing 和 DrawingImage 绘制 图 画 对 象 。 


[E MainWindow "HA "UA 























图 7.18 多 类 对 象 组 合 绘制 图 像 


下 面 解释 说 明 绘制 图 画 的 5 类 对 象 。 

* GeometryDrawing: 用 来 绘制 形状 。 

* ImageDrawing: 用 来 绘制 图 像 。 

* GlyphRunDrawing: 用 来 绘制 文本 。 

* VideoDrawing: 用 来 播放 音频 或 视频 文件 。 

* DrawingGroup: 绘图 组 , 它 将 其 他 绘图 组 合成 一 个 复合 绘图 。 
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Drawing 是 一 个 通用 对 象 。 可 以 通过 多 种 方式 使 用 Drawing 对 象 ,上 例 就 用 Image 和 
DrawingImage 来 显示 为 图 像 。 


7.2 2D 图 形 


在 WPF 中 ,对 2D 图 形 的 处 理 分 为 形状 、 绘 制 和 绘制 命令 3 层 。 其 中 ,绘制 命令 是 
WPF 元 素 合 成 系统 的 低级 命令 。 绘 制 对 绘制 命令 实施 包装 ; 形状 是 表现 绘制 的 最 直接 的 
元 素 。 

在 WPF 图 形 系统 中 有 两 套图 形 类 。 以 Rectangle 为 例 ,表示 RectangleGeometry, 也 可 
以 用 几何 路 径 (PathGeometry) 来 表示 。 大 多 数 图 形 类 位 于 System. Windows. Shapes 名 称 
空间 下 ,与 几何 图 形 类 相对 应 。 几 何 图 形 类 对 应 的 名 称 空间 是 System. Windows. Media, 
这 两 种 图 形 类 系统 在 图 形 系统 中 充当 着 不 同 的 角色 ,功能 不 同 。 在 学 习 中 需 加 以 区 分 和 
理解 。 


7.2.1 形状 


形状 把 绘制 图 画 带 到 控件 中 。 人 们 熟知 的 Line、Ellipse、Rectangle 和 Path 都 属于 几何 
图 形 的 范畴 。Polygon 和 Polyline 是 对 特别 路 径 构 建 过 程 的 简单 封装 。 

在 前 面 的 学 习 中 ,读者 已 知 绘制 图 画 有 其 独立 的 坐标 系统 ,使 用 偏 移 和 变换 可 以 在 任何 
位 置 呈现 图 画 。 表 7.1 列 出 了 形状 类 型 及 其 用 法 。 


表 7.1 形状 类 型 及 用 法 























形状 类 型 用 法 

Ellipse 表示 椭圆 

Line 表示 直线 

Path 路 径 , 可 表示 直线 与 曲线 的 组 合 结果 
Polygon 一 个 闭合 形状 多 边 形 

PolyLine 折线 或 未 闭合 的 多 边 形 

Rectangle 和 矩形 ,也 可 以 做 任意 圆 角 矩形 


在 本 节 中 ,所 有 的 元 素 都 继承 自 System. Windows. Shapes 这 个 名 称 空间 。 通 过 形状 的 
属性 给 图 上 色 。 其 中 ,Stroke 属性 规定 Brush 为 形状 轮廓 上 色 。 表 7. 2 中 给 出 了 形状 属性 
与 画笔 属性 的 等 效 值 及 表示 含义 。 


表 7.2 形状 属性 与 画笔 属性 的 等 效 值 及 表示 含义 




















形状 属性 画笔 属性 等 效 值 表示 含义 
Stroke Brush 设置 绘制 形状 边缘 (边框 ) 的 笔 刷 对 象 
StrokeThickness Thickness 使 用 设备 无 关 单位 ,设置 边框 的 宽度 
Wo z 确定 形状 拐角 处 的 轮廓 。 对 于 没有 拐角 的 形状 ,属性 不 起 
StrokeLineJoin LineJoin 作用 
StrokeMiterLimit MiterLimit ri E 处 的 轮廓 。 对 于 没有 拐角 的 形状 ,属性 不 起 
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续 表 
形状 属性 画笔 属性 等 效 值 表示 含义 





描述 形状 类 型 轮廓 的 虚线 和 间隔 的 样式 ,常用 的 赋值 方法 可 
以 是 StrokeDashArray — "str", str 是 虚线 和 间隔 的 值 的 集 
StrokeDashArray DashArray 合 ,奇数 项 为 虚线 长 度 ; 偶数 项 为 间隔 长 度 。 例 如 ， 
StrokeDashArray 一 "2,1", 则 表示 虚线 长 度 为 2, 间 隔 为 1; 
StrokeDashArray 二 "2" 则 表示 虚线 和 间隔 都 是 2 





StrokeDashCap DashCap 当 为 Dash( 虚 线 ) 时 ,设置 的 每 一 小 段 虚线 两 端的 线 帽 形状 





StrokeDashOffset DashOffset 虚线 开始 时 的 偏 移 长 度 





StrokeStartLineCap StartLineCap 决定 直线 开始 端 边缘 的 轮廓 ,只 影响 Line、Polyline 及 Path 





StrokeEndLineCap EndLineCap 决定 直线 结束 端的 轮廓 ,只 影响 Line、Polyline 及 Path 








FH Canvas 布局 中 画 一 绿色 直线 (Line)、 红 色 折 线 (Polyline)、 不 闭口 的 多 边 形 
(Polyline) 与 闭口 的 多 边 形 (Polygon) 。XAML 代码 如 下 。 


< Canvas > 
< Line Stroke = "Green" X1 = "0" Y1 = "40" X2 = "100" Y2 = "40" Height = "93" Width= "130" 
Canvas. Left = "1" Canvas. Top = "1" /> 
« Polyline Stroke = "Red" Canvas. Left = "129" Canvas. Top = "12" 
Points = "0,30 10,30 15,60 18,0 23, 30 35,30 40,0 43, 60 48, 30 140, 30 160, 60 170, 30 
200,30 " /> 
< Polyline Fill = "Orange" Stroke = "Green" StrokeThickness = "2" 
Points = "40,10 70,50 10, 50" Canvas. Left = "341" Canvas. Top = "14" /> 
< Polygon Fill = "Orange" Stroke = "Green" StrokeThickness = "2" 
Points = "40,10 70,50 10,50" Canvas. Left = "419" Canvas. Top = "14" /> 
«/Canvas » 
«/ Window» 


运行 上 述 代 码 ,页 面 显示 效果 如 图 7. 19 所 示 。 
而 MainWindow. ETE 
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图 7.19 Line,Polyline 和 Polygon 


下 面 在 Canvas 布局 中 创建 圆 角 矩形 .五 角 星 和 旋转 窍 形 。XAML 代码 如 下 。 


< Canvas Height = "292"> 
« Rectangle Width= "100" Height = "50" Canvas. Left = "35" Canvas. Top = "33" 
Fill = "Violet" RadiusX = "30" RadiusY = "50"/» 
< Polygon Fill = "Orange" Stroke = "Green" StrokeThickness = "2" 
Points = "10,20 100,50 10,80 66,3 66,98" Canvas. Left = "204" 
Canvas. Top = "12" Height = "103" Width = "105" /> 
< Rectangle Canvas. Left = "411" Canvas. Top = "63" Width = "40" Height = "10" Fill = 
"LightGreen" /> 
< Rectangle Canvas. Left = "411" Canvas. Top = "63" Width = "40" Height = "10" Fill = 
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"Violet"> 
« Rectangle. RenderTransform > 
< RotateTransform Angle - "45"/> 
«/Rectangle. RenderTransform > 
«/Rectangle 
< Rectangle Canvas. Left = "411" Canvas. Top = "63" Width = "40" Height = "10" Fill = 
"Pink"» 
< Rectangle. RenderTransform > 
< RotateTransform Angle = "90"/> 
</Rectangle. RenderTransform> 
</Rectangle> 
< Rectangle Canvas. Left = "411" Canvas. Top = "63" Width = "40" Height = "10" Fill = 
"Orange" 
< Rectangle. RenderTransform > 
< RotateTransform Angle = "135"/» 
«/Rectangle. RenderTransform > 
«/Rectangle» 
< Rectangle Canvas. Left = "411" Canvas. Top = "63" Width = "40" Height = "10" Fill = 
"Red"> 
<Rectangle. RenderTransform> 
< RotateTransform Angle = "180"/> 
«/Rectangle. RenderTransform > 
</Rectangle> 
< Rectangle Canvas. Left = "411" Canvas. Top = "63" Width = "40" Height = "10" Fill = 
"Yellow"> 
< Rectangle. RenderTransform > 
< RotateTransform Angle = "225"/> 
</Rectangle. RenderTransform > 
</Rectangle> 
< Rectangle Canvas. Left = "411" Canvas. Top = "63" Width = "40" Height = "10" Fill = 
"blue" > 
< Rectangle. RenderTransform > 
< RotateTransform Angle = "270"/> 
</Rectangle. RenderTransform > 
</Rectangle > 
<Rectangle Canvas. Left = "411" Canvas. Top = "63" Width = "40" Height = "10" Fill = 
"Green" > 
< Rectangle. RenderTransform > 
< RotateTransform Angle = "325" /> 
</Rectangle. RenderTransform > 
</Rectangle > 
«/Canvas > 
</Window> 


运行 上 述 代码 ,页 面 显示 效果 如 图 7. 20 所 示 。 代 码 中 的 第 一 个 Rectangle 通过 
RadiusX,RadiusY 设置 X 轴 与 了 轴 的 半径 ,将 矩形 变 成 圆 角 。Polygon 通过 定义 5 个 点 坐 
标 值 ,产生 五 角 星 。 其 余 的 8 个 矩形 通过 RotateTransform Angle 属性 设置 矩形 的 转角 , 生 
成 了 8 个 不 同 转角 拢 形 ,组 成 一 个 旋转 矩形 图 案 。 
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7.2.2 图 像 


图 像 是 用 于 呈现 矢量 图 和 位 图 的 数据 。 在 前 面 讨论 过 的 几何 图 形 . 笔 刷 画笔 .形状 ,这 
些 都 是 用 来 定义 矢量 数据 的 。 

在 此 , 先 来 区 分 矢量 图 与 位 图 。 矢 量 图 是 根据 几何 特性 来 绘制 图 形 ,是 用 线段 和 曲线 描 
述 图 像 ,矢量 可 以 是 一 个 点 或 一 条 线 。 矢 量 图 占用 空间 较 小 ,因为 这 种 类 型 的 图 像 文件 包含 
独立 的 分 离 图 像 ,可 以 自由 无 限制 地 重新 组 合 。 而 位 图 (bitmap) ,又 称 为 光栅 图 和 点 阵 图 ， 
是 由 许多 小 方 格 一 样 的 像素 组 成 的 图 形 。 两 者 最 大 的 区 别 : 矢量 图 形 与 分 辩 率 无 关 , 可 以 
将 它 缩放 到 任意 大 小 和 以 任意 分 辨 率 在 输出 设备 上 打印 出 来 ,都 不 会 影响 清晰 度 ; 而 位 图 
是 由 一 个 一 个 像素 点 产生 的 , 当 放大 图 像 时 ,像素 点 也 放大 了 ,但 每 个 像素 点 表示 的 颜色 是 
单一 的 ,所 以 在 位 图 放大 后 就 会 出 现 人 们 平时 所 见 到 的 马赛 克 形 状 。 位 图 的 文件 类 型 为 
*. bmp, *. pex, *. gif, * . jpg, *. tif 4I *. psd(photoshop) 5$; 矢量 图 形 格 式 为 *. AI 
CAdobelllustrator) , *. EPS 和 SVG, * . dwg 和 dxf CAutoCAD) HI * . cdr(Corel DRAW 
的 ) 等 。 

WPF 图 像 系统 均 针 对 位 图 格式 。 但 是 ,在 DrawingImage 类 型 支持 使 用 任何 图 画作 为 
应 用 程序 的 图 像 , 可 看 做 初级 的 矢量 图 模型 。 下 面 讨论 图 像 世 界 的 位 图 图 像 。 

1. Image 类 

接 下 来 ,编写 一 个 示例 ,在 其 中 运用 XAML CS 代码 两 种 方式 引用 图 像 资 源 。XAML 
代码 如 下 。 


<Grid> 
< Grid. ColumnDefinitions > 
< ColumnDefinition/> 
< ColumnDefinition/> 
</Grid. ColumnDefinitions > 
< Image Source = "Images\spring. jpg" Stretch = "None"/> 
< Image Name = " ing" Grid.Column- "1" Stretch- "Fill" Width- "205" Height = "142" /> 
«/Grid» 


其 中 ,< Image Source " Images Vspring. jpg" Stretch — " None" /73|J& XAML 代码 中 引用 
图 像 资 源 。Image 类 是 宿主 ImageSource 对 象 的 一 个 形状 。 
在 后 台 引 用 资源 的 CS 代码 如 下 。 


public MainWindow() 
{ 
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InitializeComponent(); 
img. Source = new BitmapImage(new Uri("/Images/blueSky. jpg", UriKind.Relative)); 
) 


运行 完整 的 代码 ,页 面 显示 效果 如 图 7. 21 所 示 。 




















7.21 引用 图 像 资源 的 两 种 方式 


在 后 台 CS 代码 中 ,引用 图 像 资源 的 方式 语句 如 下 。 
img. Source = new BitmapImage(new Uri("/Images/blueSky. jpg", UriKind.Relative)); 


Image 类 ,在 此 则 是 ImageSource Xf 2 ff) ft fi 2$. new BitmapImage 用 来 创建 上 载 图 
Ho new Uri 指 路 径 , 格 式 new Uri( 图 片 路 径 ,路 径 类 型 ) ,其 中 ,路 径 类 型 可 分 为 UriKind 
. Relative, UriKind. Absolute 和 UriKind. RelativeOrAbsolute 这 3 种 ,它们 分 别 代表 相对 
路 径 、 绝 对 路 径 和 不 确定 路 径 。 本 节 用 的 是 相对 路 径 。 

在 Image 控件 上 显示 一 张 图 像 时 ,通过 设置 Stretch 属性 值 来 表 
示 图 像 的 显示 方式 。Stretch 值 可 以 是 None、Fill、Uniform 和 
UniformToFill 这 4 种 类 型 。 如 图 7. 22 一 图 7. 25 分 别 显示 了 这 4 种 
类 型 所 对 应 的 显示 效果 ,下 面 来 介绍 这 4 种 类 型 。 

(1) None: 图 像 以 原始 尺寸 显示 。 

(2) Fill; 图 像 缩放 来 适应 整个 空间 。 

(3) Uniform: 图 像 适应 整个 方向 的 尺寸 ,并 同时 保持 原始 的 长 度 比例 。 

(4) UniformToFill: 图 像 适 应 整个 控件 ,并 同时 保持 原始 的 长 度 比例 。 





图 7.22 None 





7.23 Fill 图 7.24 Uniform 7.25  UniformToFill 


2. ImageSource 管道 

WPF 所 有 的 位 图 图 像 都 被 设计 成 具有 一 个 或 多 个 帧 。 例 如 ,TIFF 和 GIF 这 两 图 像 格 
式 文件 ,在 单个 文件 中 就 支持 多 个 帧 。 但 是 PNG 和 BMP 这 两 种 图 像 格式 文件 , 则 是 一 个 
帧 。 当 加 载 图 像 时 ,可 以 使 用 BitmapFrame 的 静态 函数 Create, 下 面 这 条 CS 语句 ,就 是 将 
此 处 所 用 的 图 片 放 在 下 盘 的 根 目 录 。 


BitmapFrame frame = BitmapFrame. Create(new Uri(@"F:\spring. jpg")); 


(1365 wpF 编程 基础 





下 面 使 用 CroppedBitmap 类 ,对 图 片 进行 修剪 ,只 显示 图 片 的 一 部 分 。 并 通过 Source 
属性 和 帧 建立 联系 ,代码 如 下 。 


CroppedBitmap crop = new CroppedBitmap(); 

crop. BeginInit(); 

crop. Source - frame; 

crop. SourceRect = new Int32Rect(100,150,400,250); 
crop. EndInit() ; 


将 图 像 转换 成 黑白 图 像 ,使 用 FormatConvertedBitmap 类 ,并 设置 它 的 Source 属性 , 代 
码 如 下 。 


FormatConvertedBitmap color = new FormatConvertedBitmap(); 
color.BeginInit(); 

color. Source = crop; 

color.DestinationFormat = PixelFormats. BlackWhite; 

color. EndInit(); 


最 后 要 输出 图 像 。 因 为 在 管道 中 的 每 个 对 象 (例如 ,这 里 用 到 的 BitmapFrame, 
CroppedBitmap 和 FormatConvertedBitmap) 都 继承 自 ImageSource, 所 以 可 在 Image 控件 
中 使 用 它们 中 的 任意 一 个 ,代码 如 下 。 输 出 图 像 如 图 7. 26 所 示 。 

Image img = new Inage() ; 

img. Source = color; 

Window w= new Window(); 

w. Content - img; 

w. Title = "ImageSourceChannel" ; 

w. Show() ; 

若 将 “color. DestinationFormat = PixelFormats. BlackWhite;" "P ff]. BlackWhite 换 成 
Rgb48, 则 图 像 的 输出 结果 如 图 7. 27 所 示 。 























7.26 通过 图 像 管道 输出 黑白 图 片 图 7.27 通过 图 像 管道 输出 Rgb48 图 片 


3. Image Metadata 

当前 的 大 部 分 图 像 都 支持 元 数据 。 元 数据 是 关于 数据 的 组 织 .数据 域 及 其 关系 的 信息 。 
简单 地 说 ,元 数据 就 是 关于 数据 的 数据 。 这 里 的 Image Metadata 是 指 图 像 的 元 数据 。 当 用 
数码 相机 拍摄 的 照片 , 则 包含 了 所 有 类 型 的 信息 。PhotoME 是 一 款 多 功能 的 图 像 元 数据 分 
析 与 查看 工具 , 它 能 够 分 析 和 编辑 所 有 图 像 的 元 数据 ,支持 将 数据 导出 ,如 图 7. 28 所 示 。 
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图 7.28 PhotoME 对 zootopia. jpg 图 的 属性 查看 


每 个 ImageSource 对 象 都 具有 Metadata 属性 ,可 以 访问 其 中 的 信息 。 对 于 所 有 的 位 图 
图 像 Metadata 对 象 都 返回 一 个 BitmapMetadata 对 象 。 元 数据 具有 两 个 视图 : 简化 视图 和 
查询 API。 其 中 ,简化 视图 表示 BitmapMetadata 上 的 属性 ,如 CameraModel; 查询 API 用 
于 访问 数据 存储 器 的 任何 信息 。 

4. 创建 图 像 

现实 世界 中 的 大 部 分 图 像 都 是 使 用 相机 或 程序 创建 出 来 的 ,但 有 时 ,人 们 需要 动态 创建 
图 形 。 动 态 创 建 图 形 来 优化 性 能 。 例 如 ,使 用 矢量 和 效果 一 次 性 生成 复杂 的 图 形 ,然后 显示 
为 位 图 。 

生成 位 图 图 像 可 使 用 RenderTargetBitmap 或 WritableBitmap 这 两 种 方式 。 其 中 ， 
RenderTargetBitmap 可 以 把 指定 的 可 见 显示 区 域 呈 现 为 一 个 固定 尺寸 的 位 图 图 像 , 创 建 好 
位 图 数据 ,就 可 使 用 各 种 类 型 的 图 像 编 码 器 将 其 保存 为 图 像 文 件 , 或 将 其 显示 出 来 。 
RenderTargetBitmap 继承 于 ImageSource。 另 外 , WritableBitmap 支持 在 位 图 上 编辑 像 
素 点 。 


7.2.3 WPF 图 像 特效 


1. 透明 效果 

WPF 中 所 有 的 颜色 都 具有 一 个 Alpha 值 ,并 且 每 一 个 可 视 化 元 素 都 具有 Opacity( 不 透 
明 ) 和 OpacityMask( 不 透明 遮 音 ) 属 性 。 通 过 设置 Opacity 属性 和 颜色 的 Alpha, 可 以 创建 
出 透明 效果 。 

对 于 标准 的 RGB 十 六 进 制 表示 方法 ,起 始 的 两 个 字符 表示 的 是 Alpha 值 。 下 面 的 示 
例 是 通过 使 用 LinearGradientBrush 中 Color 属性 的 Alpha 值 来 创建 透明 效果 ,XAML 代 
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码 如 下 。 


«Grid» 
< Image Source = "Images\BlackWhite. jpg" /» 
< Rectangle Width = "200" Height = "100" > 
< Rectangle. Fill > 
< LinearGradientBrush EndPoint = "0, 1"> 
< LinearGradientBrush. GradientStops > 
< GradientStop Offset = "0" Color = " # FFFF0000"/> 
< GradientStop Offset = ". 33" Color = " # 00FFFFFF" /> 
< GradientStop Offset = ". 66" Color = " # 9900FF00"/> 
< GradientStop Offset = "0.9" Color = " # FF0000FF"/> 
</LinearGradientBrush. GradientStops > 
</LinearGradientBrush > 
</Rectangle. Fill > 
</Rectangle> 
</Grid> 


运行 上 述 代码 ,页 面 显示 效果 如 图 7. 29 所 示 。 其 中 ,Grid 下 面 的 Image 的 Source 加 载 
了 一 张 黑白 相间 的 图 片 ,图 片 的 作用 是 衬托 出 线性 渐变 笔 刷 的 透明 效果 。 

2. WENER 

OpacityMask R Bj] t 98 ) nT VL pus BH BE jr FE SS AER Eo a EAE FH 6 i 28 E 
(RadialGradientBrush) Xf 2 ME Jj 4358] 3E 8 , XAML 代码 如 下 。 


< Canvas Width = "252" Height = "137" Background = "Yellow" 
< Canvas. OpacityMask > 
< RadialGradientBrush GradientOrigin = ".5 .3"> 
< RadialGradientBrush. GradientStops > 
< GradientStop Offset = "0" Color = " # FF000000" / 
< GradientStop Offset = ".33" Color = " # 00000000" /> 
< GradientStop Offset = ". 66" Color = "it FF000000" /» 
< GradientStop Offset = "1" Color = " # 33000000" /> 
</RadialGradientBrush. GradientStops > 
</RadialGradientBrush > 
</Canvas. OpacityMask > 
«/Canvas » 


运行 上 述 代码 ,页 面 显示 效果 如 图 7. 30 所 示 。 通 过 使 用 径 向 渐变 笔 刷 对 象 作为 
Canvas 布局 中 的 OpacityMask 值 ,产生 了 径 向 渐变 笔 刷 不 透明 遮 单 效果 。 
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图 7.29 线性 渐变 笔 刷 设置 透明 效果 图 7.30 iÉBDIUE SURUR 
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3. BitmapEffects 

OpacityMask 是 通过 合成 引擎 对 像素 的 生成 过 程 进行 编辑 ,而 BitmapEffects 是 针对 每 
个 像素 进行 操作 ,继承 自 UIElement, 被 称 为 位 图 效果 (Bitmap Effects), BitmapEffects 是 
源 于 它 在 合成 引擎 所 生成 的 位 图 (真实 的 像素 ) 上 进行 操作 。 虽 然 所 有 的 效果 都 能 被 应 用 于 
任何 元 素 上 ,但 其 中 一 些 效果 (DropShadowBitmapEffect) 更 适合 矢量 内 容 ， 

在 WPF 中 ,使 用 BitmapEffect 对 所 有 Visual 对 象 进行 位 图 特效 处 理 。 它 是 基于 像素 
级 别 的 ,而 且 是 基于 软件 处 理 模 式 而 非 硬件 加 速 的 处 理 模式 。 常 见 的 位 图 特效 处 理 有 斜面 
特效 (BevelBitmapEffect) 、 虚 化 效果 (BlurBitmapEffect) 、 外 辉 光 效果 (OuterGlowBitmapEffect) 、 
阴影 效果 (DropShadowBitmapEffect) 和 浮雕 特效 (EmbossBitmapEffect)。 因 为 软件 处 理 模 
式 的 效率 相对 较 低 , 位 图 效果 是 非常 消耗 CPU 资源 的 。 因 为 它 是 由 CPU 计算 的 而 不 是 
GPU(Graphics Processing Unit, 图 形 处 理 器 ) ,而 且 不 要 将 位 图 效果 与 动画 (Animation ) 一 
起 使 用 , 它 常 常 使 动画 变 得 很 不 流畅 。 故 此 ,在 有 大 量 Visual 对 象 或 存在 有 大 量 动画 时 
慎 用 。 


7.3 3D 图 形 


在 WPF 中 ,3D 图 形 是 用 矢量 图 形 表示 的 一 种 形式 ,并 不 具备 物理 模型 .碰撞 检测 及 用 
于 编写 游戏 需要 的 3D 环境 所 需 的 高 级 服务 。 

WPF 生成 三 维 图 形 的 基本 思想 是 能 得 到 一 个 物体 的 三 维 立 体 模型 (Model)。 由 于 计 
算 机 的 屏幕 是 二 维 的 ,因此 需要 定义 了 一 个 用 于 给 物体 拍照 的 照相 机 (Camera)。 拍 到 的 照 
片 其 实 是 物体 到 一 个 平坦 表面 的 投影 。 这 个 投影 由 3D 泻 染 引 擎 泻 染 成 位 图 。 引 擎 通过 计 
算 所 有 光源 对 3D 空间 中 物体 的 投影 面 反射 的 光量 ,来 决定 位 图 中 每 个 像素 点 的 颜色 。 

在 WPF 3D 中 ,需要 理解 的 基本 概念 有 三 维 空间 坐标 系 、 模 型 (Models)、 材质 
(Materials) ,光源 (Lights) 、 照 相机 (Cameras) 和 变换 (Transform)。 


7.3.1 WPF 坐标 系 


当 使 用 WPF 创建 图 形 时 ,应 该 清楚 地 知道 图 形 显示 在 什么 地 方 ,要 明白 这 一 点 ,就 需 
要 对 WPF 中 的 坐标 系统 有 一 定 的 认识 。 

在 WPF 二 维 坐标 系 中 ,左上 和 角 是 坐标 原点 ,向 右 为 X 轴 的 正方 向 ,向 下 为 Y 轴 的 正方 
向 ,如 图 7.31 所 示 的 WPF 默认 二 维 坐标 系 。 

在 WPF 的 三 维 坐标 系 中 ,原点 一 般 位 于 在 WPF 中 创建 的 三 维 对 象 的 中 心 。 三 维 坐标 
的 X 轴 正 方向 朝 右 ,Y 轴 的 正方 向 朝 上 ,Z 轴 的 正方 向 从 原点 向 外 朝向 观察 者 。 图 7. 32 给 
出 了 WPF 三 维 空间 坐标 系 。 

充分 理解 WPF 的 坐标 系 ,在 Canvas 布局 控件 中 画 一 条 直线 ,采用 系统 默认 的 二 维 坐 
标 系 ,XAML 代码 如 下 。 

< Canvas Height = "500" Width = "500"> 


< Line X1 = "0" Y1= "0" X2 = "200" Y2 = "100" Stroke = "Black" StrokeThickness = "2" /> 
«/Canvas » 








Gn 


图 7.31 WPF 默认 二 维 坐标 系 图 7.32 WPF 三 维 坐标 系统 


运行 上 述 代 码 ,页 面 显示 效果 如 图 7. 33 所 示 。WPF 除了 默认 的 坐标 系统 外 ,也 支持 用 
户 自 定 义 坐 标 系统 。 例 如 ,在 很 多 场景 中 ,是 以 左下 角 为 坐标 原点 ,Y 轴 方 向 指向 上 方 。 
图 7. 34 所 示 为 用 户 自 定义 二 维 坐标 系 。 








(0, 0) 
图 7.33 WPF 默认 二 维 坐标 系 图 7.34 用 户 自 定义 二 维 坐标 系 
在 用 户 自 定义 坐标 系 中 , 画 一 条 从 原点 出 发 的 直线 ,XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 --> 
Title = "MainWindow" Height = "350" Width= "525"> 
< Border BorderBrush = "Black" BorderThickness = "1" Height = "130" Width = "200"> 
< Canvas Height = "272" Width = "244"> 
< Canvas. RenderTransform > 
< TransformGroup > 
< ScaleTransform ScaleY = " - 1" /> 
< TranslateTransform Y = "200" /> 
</TransformGroup > 
</Canvas. RenderTransform > 
< Line Xl = "0" Y1 = "0" X2 ="150" Y2 = "100" Stroke = "Black" StrokeThickness = "2" 
Canvas. Left = "1" Canvas. Top = "71" Height = "110" Width = "175" /> 
</Canvas > 
</Border > 
</Window> 


运行 上 述 代码 ,页 面 显示 效果 如 图 7. 35 所 示 。 这 时 ,在 变换 了 的 二 维 坐标 系 下 , 按 正 常 
方式 ,在 Canvas 中 添加 一 个 按钮 和 文本 框 ,XAML 代码 如 下 。 


< Button Canvas. Top = "144" Canvas. Left = " - 1" Foreground = "Green" Content = "Button" /> 
< TextBlock Canvas. Top = "179" Canvas. Left = "1" Foreground = "Blue" Text = "TextBlock" /> 


运行 上 述 代码 ,页 面 显 示 效 果 如 图 7. 36 所 示 。 发 现 文本 和 按钮 是 颠倒 的 。 要 解决 这 个 
问题 ,在 按钮 和 文本 框 上 运用 变换 的 XAML 如 下 。 
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图 7.35 变换 二 维 坐标 系 下 的 直线 图 7.36 变换 二 维 坐标 系 下 的 按钮 和 文本 框 


< Button Canvas. Top = "144" Canvas. Left = " — 1" Foreground = "Green" Content = "Button" > 
< Button. RenderTransform > 
< ScaleTransform ScaleY = " - 1" /> 
«/Button. RenderTransform > 
«/Button» 
< TextBlock Canvas. Top = "179" Canvas. Left = "1" Foreground = "Blue" Text = "TextBlock"» 
< TextBlock. RenderTransform- 
< ScaleTransform ScaleY= " - 1" /> 
</TextBlock. RenderTransform> 
</TextBlock> 


运行 上 述 代码 ,页 面 显示 效果 如 图 7. 37 所 示 。 按 钮 与 文本 框 控件 正常 显示 。 


9  MainWindow = 





[TextBlock 














7.37 按钮 和 文本 框 变 回 正常 输出 效果 


7.3.2 模型 


在 3D 图 形 的 世界 中 ,所 有 物体 都 被 描述 成 为 一 系列 三 角形 的 集合 。 三 角形 是 用 来 描 


述 平面 最 小 的 几何 体 。 在 场景 中 , 泻 染 引擎 可 以 计算 出 每 一 个 三 角形 的 颜色 ,这 取决 于 它 的 
材质 和 它 与 光线 的 角度 。 用 三 角形 构建 3D 世界 ,这 些 点 都 在 同一 平面 上 ,这 种 表面 计算 和 
泻 染 起 来 相对 简单 。 


WPF 的 所 有 显示 都 是 用 3D 管道 来 实现 的 。 所 有 的 控件 、 形 状 、 文 本 ,绘制 图 画 都 能 被 


呈现 为 3D 三 角形 。 一 个 3D 模型 定义 了 场景 中 的 一 个 物体 , 它 包含 一 个 Geometry 对 象 ,这 
个 对 象 是 一 个 网 格 (Mesh) 和 一 个 材质 (Material) 。 也 可 以 让 物体 的 每 一 个 表面 都 具有 一 种 
材质 (Material) 和 一 个 笔 刷 (Brush) 。 材 质 定 义 了 一 个 具体 角度 的 光 的 反射 量 , 而 笔 刷 定义 
了 表面 的 颜色 。 笔 刷 可 以 是 一 种 单纯 的 颜色 ,也 可 以 是 渐变 的 ,甚至 可 以 是 一 幅 图 片 ,这 些 
称 为 纹理 (Texture) 。 


3D 物体 的 一 个 表面 称 为 一 个 网 格 (Mesh) 。 一 个 网 格 被 定义 为 许多 3D 点 ,这些 点 称 为 
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顶点 (Vertices) 。 这 些 顶 点 通过 环绕 方式 连接 起 来 形成 三 角形 。 每 一 个 三 角形 都 有 一 个 正 
面 和 反面 ,只 有 正面 才 会 被 泻 染 。 三 角形 的 正面 可 以 通过 点 的 环绕 顺序 来 确定 。 
在 此 , 先 来 绘制 一 个 简单 的 三 角形 。 其 XAML 代码 如 下 。 
<! -- 保留 Window 代码 部 分 --> 
Title = "MainWindow" Height = "350" Width = "525"> 
<Grid> 





< Viewport3D> 
< Viewport3D. Camera > 
«PerspectiveCamera Position =" - 2, 2, 2" LookDirection = "2, - 2, - 2" 
UpDirection = "0, 1, 0"/> 
«/Niewport3D. Camera > 
<ModelVisual3D > 
< ModelVisual3D. Content > 
< GeometryModel3D> 
< GeonetryModel3D. Geometry > 
< MeshGeometry3D Positions =" 1,0,0 0, - 1,0 0,0,1 JJ 
«/GeonetryModel3D. Geometry > 
< GeonetryModel3D. Material > 
«DiffuseMaterial Brush = "Green" /> 
«/GeonetryModel3D. Material > 
«/GeonetryModel3D 
«/ModelVisual3D. Content > 
«/ModelVisual3D» 
«/Viewport3D» 
«/Grid» 
</Window > 


运行 上 述 代 码 ,页 面 显示 效果 如 图 7. 38 所 示 。 其 中 Viewport3D 是 连接 2D 和 3D 世界 
大 门 的 一 个 控件 。 

每 一 个 3D 场景 都 有 一 个 摄像 机 。 摄 像 机 定义 Position, LookDirection 和 UpDirection 
属性 。WPF 支持 正 交 (Orthographical ) 和 透视 (Perspective ) 摄像 机 。 其 中 PerspectiveCamera 
(透视 相机 ) 指 定 3D 模型 到 2D 可 视图 面 的 投影 。 换 言 之 , 它 描述 各 个 面 均 聚 集 到 某 个 水 平 
点 的 平 截 体 。 对 象 离 摄像 机 越 近 就 显得 越 大 , 离 得 越 远 则 显得 越 小 。 

在 本 例 中 ,尽管 < DiffuseMaterial Brush—" Green " /> 通过 笔 刷 定义 Material 为 绿色 ， 
但 是 运行 结果 是 黑色 。 因 为 模型 中 没有 加 入 光照 。 在 < ModelVisual3D. Content > 后 加 入 
光照 效果 的 XAML 代码 ,再 运行 程序 ,页 面 显示 效果 如 图 7. 39 所 示 。 三 角形 变 成 期 望 的 
绿色 。 

< ModelVisual3D. Content > 

< Model3DGroup> 

<AmbientLight Color= "White" /> 
<! -- 保留 与 上 面相 同 的 代码 部 分 --> 


«/Model3DGroup > 
«/ModelVisual3D. Content > 
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图 7.38 WPF 3D 三 角形 7.39 加 入 光照 后 的 三 角形 的 3D 模型 


从 上 面 的 示例 中 可 知 ,GeometryModel3D. Geometry 和 MeshGeometry3D 总 是 连 在 一 
起 来 创建 模型 。 其 中 ,使 用 MeshGeometry3D 定义 模型 时 ,首先 在 WPF 三 维 坐标 系 中 定义 
一 系列 点 的 位 置 ,然后 从 这 些 方 位 列表 中 选择 3 个 点 来 定义 三 角形 ,再 来 设置 纹理 坐标 ,把 
这 些 点 映射 到 材质 上 。 为 了 理解 它们 之 间 的 关系 ,来 创建 一 个 三 面 立 方 体 。XAML 代码 
如 下 。 


<! -- 保留 Window 代码 部 分 --> 
<Grid> 
< Viewport3D Width = "200" Height = "200"> 
< Viewport3D. Camera > 
< PerspectiveCamera LookDirection- " - .7, -.8, - 1" 
Position = "3,8,4,4" 
FieldOfView = "17" 
UpDirection = "0, 1, 0"/> 
</Viewport3D. Camera > 
< ModelVisual3D > 
< ModelVisual3D. Content > 
< Model3DGroup> 
< PointLight Position = "3.8,4,4" 
Color = "White" 
Range = "8" 
ConstantAttenuation = "1.0"/» 
< GeonetryModel3D > 
< GeometryModel3D. Geometry ^ 
< MeshGeometry3D 
TextureCoordinates = "0,0 1,0 0,1 1,1 0,0 1,1 1,1 1,1" 
Positions = "0,0,0 1,0,0 0,1,0 1,1,0 0,1, - 1 1,1, - 1 1,0, - 1" 
TriangleIndices = "0,1,2 3,2,1 4,2,3 5,4,3 5,3,1 6,5,1 "/> 
«/GeonetryModel3D. Geometry > 
< GeonetryModel3D. Material > 
<DiffuseMaterial > 
<DiffuseMaterial. Brush> 
< LinearGradientBrush EndPoint = "1, 0"> 
< LinearGradientBrush. GradientStops > 
< GradientStop Offset = "0" Color = "Black" /> 
< GradientStop Offset = "1" Color = "White" /> 
«/LinearGradientBrush. GradientStops > 
«/LinearGradientBrush- 
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</DiffuseMaterial. Brush> 
</DiffuseMaterial > 
</GeometryModel3D. Material > 
</GeometryMode13D > 
«/Model3DGroup > 
</ModelVisual3D. Content > 
</ModelVisual3D> 
</Viewport3D> 
</Grid> 
</Window> 


运行 上 述 代 码 ,页面 显 示 效 果 如 图 7. 40 所 示 。 分 析 上 
述 创建 立方 体 的 XAML 代码 ,涉及 3D 立方 体 的 创建 步骤 和 
MeshGeometry3D 的 常用 属性 。 下 面 分 别 介绍 它们 。 

创建 3D 立方 体 的 步骤 如 下 。 

CD 首先 用 Positions 属性 定义 一 系列 点 。 立 方 体 具有 8 
个 顶点 。 由 于 此 处 立方 体 只 有 3 个 可 见 的 面 ,有 一 个 点 是 不 
可 见 点 。 所 以 点 的 序号 从 0 开始 ,从 第 0 点 到 第 6 点 , 共 需 要 
7 个 点 。 图 7.41(a) 标 出 7 个 点 分 别 在 三 维 坐标 系 中 的 位 置 。 

其 中 ,上 述 代 码 中 的 “Positions="0,0,0 1,0,0 0,1,0 1, 

















图 7.40 带 有 线性 热 渐变 色 





1,0 0,1, 一 1 1,1, 一 11,0, 一 1"” 就 是 指 从 第 0 点 到 第 6 点 所 下 和 全 
对 应 的 三 维 坐标 值 。 
4 5 4 5 
3 
IN: BE 
Xx 
(b) (c) 
图 7.41 3D 立方 体 构建 步骤 图 
(2) 设 定 网 状 结构 ,有 序 串联 这 些 点 ,构建 三 角形 。 构 建 第 一 个 三 角形 ,如 图 7.41(b) 


所 示 , 它 是 由 0、1、2 这 3 个 点 组 成 的 。 继 续 构 建 第 二 个 三 角形 ,如 图 7. 41(c) 所 示 , 它 是 由 
1.2,3 这 3 个 点 组 成 的 。 以 此 类 推 ,第 三 个 .第 四 个 、 第 五 个 .第 六 个 三 角形 的 构建 过 程 如 
图 7.42 所 示 。 


4 5 5 5 
7.42 3D 立方 体内 三 角形 构建 顺序 图 


(3) 将 这 些 点 映射 到 材质 上 (或 称 为 纹理 “Texture”) 。 
接 下 来 介绍 MeshGeometry3D 常用 的 4 个 属性 ,如 表 7.3 所 示 。 
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37.3 MeshGeometry3D 常用 属性 及 其 描述 

















属 性 描 述 
Normals 获取 或 设置 MeshGeometry3D 的 法 向 量 的 集合 
Positions 获取 或 设置 MeshGeometry3D 的 顶点 位 置 的 集合 
TextureCoordinates 获取 或 设置 MeshGeometry3D 的 纹理 坐标 集合 
TriangleIndices 获取 或 设置 MeshGeometry3D 的 三 角形 索引 的 集合 


初学 者 不 易 区 分 TriangleIndices 和 Positions 的 关系 。 因 为 在 3D 图 形 的 世界 中 ,所 有 
物体 都 可 以 被 描述 成 为 一 系列 三 角形 的 集合 。 以 上 面 的 TriangleIndices 一 "0,1,2 3.2. 
1 4,2,3 5.4.3 5,3,1 6,5,1"” 为 例 , 它 表示 三 角形 索引 的 集合 。 其 中 ,第 一 个 三 角形 是 由 0、 
1 和 2 这 3 个 点 构成 ; 第 二 个 三 角形 是 由 3、2 和 1 这 3 个 点 构成 ; 以 此 类 推 。 这 里 面 的 每 
个 数字 对 应 图 7.41 中 的 每 个 点 。 这 种 对 应 关系 呈现 三 角形 的 不 同 面 。 可 以 看 出 ,上 面 每 三 
个 点 组 成 的 一 个 三 角形 都 是 逆 时 针 顺 序 的 ,这 是 因为 WPF 采用 逆 时 针 的 环绕 方式 来 显示 
正面 ,或 者 用 右手 定 则 : 握 住 右手 , 伸 出 拇指 ,其 余 四 指 为 逆 时 针 方向 ,此 时 拇指 指向 的 是 
WPF 正面 。 

TextureCoordinates: 纹理 坐标 ,用 于 确定 将 Material 映射 到 构成 网 格 的 三 角形 的 顶点 
的 方式 。(0,0) 代 表 整 个 图 形 的 左上 角 ; (1,1) 则 代表 右 下 角 ;(0,1) 则 代表 左下 角 ; (1,0) 
则 代表 右上 角 。 

Normals: 法 向 量 , 是 与 定义 网 格 的 每 个 三 角形 的 面 垂直 的 向 量 。 法 向 量 用 于 确定 是 否 
点 亮 给 定 三 角形 面 。 如 果 指 定 三 角形 索引 , 则 将 考虑 相 邻 面 来 生成 法 向 量 。 


7.3.3 材质 


一 个 3D 模型 定义 了 场景 中 的 一 个 物体 。 它 包含 一 个 Geometry 对 象 , 这 个 对 象 可 以 看 
作 由 一 个 网 格 (Mesh) 和 一 个 材质 (Material) 构 成 。 材 质 本 身 具 有 一 个 笔 刷 。 三 维 对象 使 用 
的 材料 分 为 漫 射 材料 (Diffuse) ` 放 射 材 料 CEmmisive) 和 反射 材料 (Specular) 三 类 ,它们 的 特 
性 如 下 。 

(1) 温 射 材料 : 确定 三 维 对 象 在 直射 光 ( 白 光 ) 照 射 下 的 颜色 ,其 作用 就 如 同 墙 面 喷漆 
一 样 。 

(2) 放射 材料 : 使 对 象 产生 发 光 效果 。 光 的 颜色 由 材料 的 颜色 决定 。 

G) 反射 材料 : 控制 三 维 对 象 上 高 光 反 射 区 域 的 颜色 。 高 光 反 射 区 域 指 在 金属 铬 等 光 
滑 亮 泽 表面 上 看 到 的 光亮 区 域 。 

对 上 述 立方 体 选 用 ImageBrush 作为 材质 ,XAML 代码 如 下 。 





< GeometryModel3D. Material > 
<DiffuseMaterial > 
<DiffuseMaterial. Brush> 
< ImageBrush ImageSource = "Images\spring. jpg"/> 
</DiffuseMaterial. Brush> 
</DiffuseMaterial > 
«/GeonetryModel3D. Material > 


运行 上 述 代码 ,页 面 显示 效果 如 图 7. 43 所 示 。ImageBrush 使 用 图 片 做 立方 体 材质 
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7.3.4 光源 与 照相 机 


1. 光源 

没有 光源 什么 也 看 不 到 。 因 此 对 于 3D 图 形 , 首 先 需要 在 场景 中 至 少 放 置 一 个 光源 来 
照 亮 模型 。WPF 中 有 4 种 光源 类 型 分 别 是 AmbientLight (环境 光 ) ,SpotLight CR EH), 
DirectionalLight (方向 光 ) 和 PointLight( 点 光 ) 。 

将 图 7. 43 的 效果 图 更 换 成 环境 光 做 光源 ,XAML 代码 为 < AmbientLight Color = 
"White" />, 页 面 显示 效果 如 图 7. 44 所 示 。 图 7. 45 给 出 了 不 同类 型 光源 的 投影 效果 。 


43 Mainwindow (casis E3 MeinWindow E 





























图 7.43 图 片 做 立方 体 材质 图 7.44 环境 光照 下 的 立方 体 








7.45 不 同类 型 光源 的 投影 效果 


这 4 种 光源 发 光 效 果 不 同 ,各 自 特征 如 下 。 

(1) 环境 光 : 将 光 投向 各 个 方向 ,使 所 有 对 象 均匀 受 光 ,如 图 7. 45(a) 所 示 。 如 果 只 用 
环境 光 , 则 对 象 可 能 会 显得 褪色 ,而 且 颜 色 单一 。 为 了 获得 最 佳 效果 ,需要 使 用 其 他 光 。 

(2) 聚焦 光 : 投射 光 所 投射 的 光 如 同 聚 光 灯 一 般 , 光 从 发 光 位 置 发 出 ,并 在 锥 形 区 域内 
传播 。 投 射 光 不 影响 到 位 于 锥 形 发 光 区 域 以 外 的 那 部 分 三 维 对 象 ,如 图 7. 45(b) 所 示 。 

G) 定向 光 : 沿 着 特定 的 方向 均匀 平行 投射 ,就 像 太阳 光一 样 , 如 图 7. 45(c) 所 示 。 

(4) 点 光 : 从 一 个 点 向 所 有 方向 投射 光 , 就 像 普通 的 灯泡 一 样 ,如 图 7. 45(d) 所 示 。 

2. 照相 机 

照相 机 是 观察 者 观察 三 维 对 象形 态 和 位 置 的 工具 .照相 机 的 位 置 坐标 及 与 对 象 的 距离 
直接 影响 到 三 维 对 象 的 呈现 。WPF 中 的 相机 有 正 交 相机 (OrthographicCamera) 和 透视 
(PerspectiveCamera) 相 机 两 类 。 其 中 .OrthographicCamera( 正 交 相 机 ) 是 指定 的 三 维 模型 
到 二 维 可 视 化 图 面 上 的 正 投影 。 当 然 , 正 交 相 机 也 需要 指定 位 置 ,如 观测 时 的 “向 上 ”方向 等 
属性 。 它 描述 的 并 不 包括 透视 的 收缩 投影 (也 就 是 说 ,如 果 从 观察 者 的 角度 来 说 ,前 者 对 观 
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察 对 象 没 有 透视 感 ,因为 描述 的 是 和 侧面 平行 的 取景 框 。 透 视 相 机 的 工作 原理 与 普通 照相 
机 镜头 类 似 ,对 象 离 照相 机 越 远 ,看 起 来 就 越 小 ,观察 到 的 对 象 则 有 和 远 小 近 大 的 效果 。 

下 面 以 PerspectiveCamera (透视 相机 ) 为 例 , 查 阅 相机 的 属性 值 的 含义 。 常 用 的 属性 
及 其 描述 如 表 7.4 所 示 。 


表 7.4  PerspectiveCamera 常用 属性 及 其 描述 























属 性 描 g 
Position 获取 或 设置 以 世界 坐标 表示 的 相机 位 置 
FieldOfView 获取 或 设置 一 个 值 ,该 值 表示 相机 的 水 平视 角 
LookDirection 获取 或 设置 定义 相机 在 世界 坐标 中 的 拍摄 方向 的 Vector3D 
UpDirection 获取 或 设置 定义 相机 向 上 方向 的 Vector3D 
NearPlaneDistance 获取 或 设置 一 个 值 ,该 值 指定 到 相机 近 端 剪裁 平面 的 摄像 机 的 距离 
FarPlaneDistance 获取 或 设置 一 个 值 ,该 值 指定 到 相机 远 端 剪裁 平面 的 摄像 机 的 距离 


当然 ,照相 机 的 位 置 坐标 是 可 以 变化 的 ,还 以 透视 相机 为 例 , 调 整 相机 位 置 , 如 图 7. 46 
所 示 。 当 相机 位 置 靠近 Z 轴 中 心 时 , 即 Z 坐标 值 变 小 ,观察 到 的 对 象 变 大 ; 当 相 机 位 置 远 离 
Z 轴 中 心 时 , 即 Z 坐标 值 变 大 ,观察 到 的 对 象 变 小 。 相 机 的 位 置 就 是 观察 者 的 位 置 ,相机 的 
位 置 可 以 任意 设置 ,这 样 观察 到 的 三 维 对 象 的 “形象 "就 会 发 生变 化 。 在 三 维 场景 中 正确 设 
置 相机 位 置 很 重要 。 








图 7.46 调整 PerspectiveCamera 位 置 


7.3.5 变换 


变换 (Transform) 是 使 用 坐标 系统 来 改变 形状 或 元 素 的 绘制 方式 。 在 WPF 中 ,变换 是 
由 继承 自 System. Windows. Media. Transform 抽象 类 的 类 表示 , 表 7.5 列 出 常用 的 变换 类 
及 其 重要 属性 。 
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表 7.5 常用 的 变换 类 及 其 重要 属性 

名 称 描 述 重要 属性 
TranslateTransform | 将 坐标 系 移动 一 定 的 距离 X,Y 
RotateTransform 旋转 坐标 系统 , 绕 着 选择 的 中 心 旋转 Angle、CenterX Center Y 
ScaleTransform 放大 或 缩小 坐标 系统 ,实现 图 形 的 缩放 | ScaleX.ScaleY ,.CenterX, CenterY 
SkewTransform iei s p. 例如 ,正方 形变 成 平行 AngleX, AngleY , CenterX, CenterY 

四 边 形 

MatrixTransform 通过 矩阵 乘积 修改 坐标 系统 Matrix 
TransformGroup 组 合 多 个 变换 ,使 用 应 注意 变换 顺序 N/A 








由 表 7. 3 可 知 ,所 有 变换 都 使 用 数学 中 的 矩阵 改变 形状 坐标 。 让 Canvas 中 的 
Rectangle 旋转 25°, XAML 代码 如 下 。 
< Canvas > 
< Rectangle Width = "70" Height = "12" Stroke = "Green" Fill = "Blue" 
Canvas. Left = "100" Canvas. Top = "100"> 
< Rectangle. RenderTransform- 
< RotateTransform Angle = "25" CenterX = "45" CenterY = "5"/> 
«/Rectangle. RenderTransform > 
</Rectangle > 
</Canvas > 


74 小 结 


WPF 基于 元 素 合 成 的 设计 思想 也 适用 于 WPF 的 图 形 系统 。 本 章 从 常用 的 几何 图 形 
元 素 出 发 ,学 习 了 绘制 图 画 和 2D 形状 及 属性 ,并 讲解 了 WPF 3D 的 三 维 空间 坐标 系 、 模 型 
(Models) .材质 (Materials) .光源 (Lights)、 照 相机 (Cameras) 和 变换 (Transform ) 。 


习题 与 实验 7 


1. 根据 7.1 节 的 内 容 , 熟 练 掌握 LineSegment , BezierSegment , ArcSegment , CombineGeometry 
和 GeometryGroup 这 些 混合 几何 图 形 , 按 如 下 要 求 绘图 。 

(1) 用 CombineGeometry 绘制 两 个 等 大 小 的 焦点 分 别 在 
X 轴 、Y 轴 的 椭圆 ,填充 规则 为 Xor, 页 面 效果 如 图 7.47 所 示 。 

(2) 用 GeometryGroup 绘制 5 个 大 小 相同 的 圆 ,填充 规则 
为 EvenOdd ,页面 显示 效果 如 图 7. 48 所 示 。 

2. 在 Canvas 布局 中 ,采用 Polyline 绘制 心电图 。 

3. 使 用 MeshGeometry3D 定义 模型 ,创建 一 个 三 棱锥 , 选 
用 ImageBrush 作为 材质 ,实现 如 图 7. 49 所 示 的 环境 光照 下 的 


三 棱锥 。 图 7.47 Xor BOEXUMI 
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7.48 EvenOdd 填充 5 个 同心 圆 图 7.49 环境 光照 下 的 三 棱锥 
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动画 与 媒体 


媒体 是 传播 信息 的 媒介 。 生 活 中 常见 的 媒体 类 型 是 音频 和 视频 。 动 画 是 视频 媒体 的 一 
部 分 , 它 依靠 人 眼 的 视觉 残留 效应 ,将 静止 的 画面 变 为 动态 的 图 像 技术 。 


8.1 动画 基础 


在 以 往 的 程序 开发 中 ,如 果 想 构建 动画 ,需要 定时 器 和 自 定义 的 绘图 元 素 ,并 让 这 些 给 
图 元 素 根据 定时 器 做 出 相应 的 改变 ,以 实现 动画 效果 ,开发 难度 和 工作 量 都 是 很 高 的 。 并 且 
这 些 动画 的 拓展 性 和 灵活 性 一 般 很 弱 ,代码 量 和 复杂 度 却 很 大 。 而 在 WPF 中 ,可 以 使 用 声 
明 的 方式 构建 动画 ,甚至 不 需要 任何 后 台 代码 ,就 可 以 实现 动画 效果 。WPF 提供 的 动画 模 
型 和 强大 的 类 库 , 让 一 般 动 画 的 实现 都 变 得 轻而易举 。 在 WPF 中 ,创建 更 加 复杂 的 动画 ， 
甚至 也 可 以 使 用 设计 工具 或 第 三 方 工具 在 XAML 中 实现 。 


8.1.1 动画 的 概念 


世界 著名 动画 艺术 家 、 英 国人 John Hales 说 :“ 运 动 是 动画 的 本 质 ." 也 有 人 说 “动画 是 
运动 的 艺术 ”。 总 之 ,动画 与 运动 是 分 不 开 的 。 

动画 是 集 绘画 漫画、 电影、 数字 媒体 .摄影 .音乐 ,文学 等 众多 艺术 门类 于 一 身 的 艺术 表 
现形 式 。 最 早 发 源 于 19 世纪 上 半 叶 的 英国 ,兴盛 于 美国 ,中 国 动画 起 源 于 20 世纪 20 年 代 。 
动画 是 一 门 年 青 的 艺术 , 它 是 唯一 有 确定 诞生 日 期 的 一 门 艺术 。1892 年 10 月 28 日 埃 米 
尔 。 雷诺 首次 在 巴黎 著名 的 葛 莱 凡 蜡 像 馆 向 观众 放映 光学 影 戏 , 标 志 着 动画 的 正式 诞生 , 同 
时 埃 米尔 。 雷诺 也 被 誉 为 “动画 之 父 ”。 

动画 的 英文 有 很 多 表述 , 如 animation, cartoon, animated cartoon。 其 中 较 正 式 的 
“Animation” 一 词 源 自 于 拉丁 文字 根 anima, EEH RA”, zi] animate 是 “赋予 生命 ”的 意 
思 , 引 申 为 使 某 物 活 起 来 的 意思 。 所 以 动画 可 以 定义 为 使 用 绘画 的 手法 ,创造 生命 运动 的 
8.1.2 动画 的 原理 


当 人 们 在 电影 院 看 电影 或 在 家 里 看 电视 时 ,画面 中 的 人 物 动作 是 流畅 的 、 自 然 的 和 连续 
的 。 但 是 当 仔细 看 一 段 电 影 胶片 时 ,看 到 的 画面 却 不 连续 。 只 有 以 一 定 的 速率 投影 在 银幕 
上 才 有 运动 的 视觉 效果 ,这 种 现象 可 以 由 视觉 暂 留 的 原理 来 解释 。 

视觉 暂 留 现象 即 视觉 暂停 现象 (Persistence of vision, Visual staying phenomenon， 
duration of vision) 又 称 * 余 晖 效应 ,1824 年 由 英国 伦敦 大 学 教授 皮特 。 马克。 罗 葛 特 在 他 
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的 研究 报告 (移动 物体 的 视觉 暂 留 现象 ) 中 最 先 提出 。 

物体 在 快速 运动 时 , 当 人 眼 所 看 到 的 影像 消失 后 ,人 了 眼 仍 能 继续 保留 其 影像 0.1 一 0. 4 
秒 的 图 像 ,这 种 现象 被 称 为 视觉 暂 留 现象 ,是 人 眼 具 有 的 一 种 性 质 。 人 眼 观 看 物体 时 ,成 像 
于 视网膜 上 ,并 由 视神经 输入 大 脑 ,感觉 到 物体 的 像 。 但 当 物 体 移 去 时 ,视神经 对 物体 的 印 
象 不 会 立即 消失 ,而 要 延续 0. 1 一 0. 4 秒 的 时 间 , 人 了 眼 的 这 种 性 质 被 称 为 “眼睛 的 视觉 暂 留 ”。 

人 了 眼 在 观察 景物 时 , 光 信 号 传人 大 脑 神经 , 需 经 过 一 段 短暂 的 时 间 , 光 的 作用 结束 后 , 视 
觉 形象 并 不 立即 消失 ,这 种 残留 的 视觉 称 * 后 像 ”, 视 觉 的 这 一 现象 则 被 称 为 “视觉 暂 留 ”。 

视觉 暂 留 现象 是 光 对 视网膜 所 产生 的 视觉 在 光 停止 作用 后 , 仍 保留 一 段 时 间 的 现象 ,其 
具体 应 用 是 电影 的 拍摄 和 放映 。 原 因 是 由 视神经 的 反应 速度 造成 的 ,其 值 是 1/24 秒 ,这 是 
动画 和 电影 等 视觉 媒体 形成 和 传播 的 根据 。 视 觉 实 际 上 是 靠 眼睛 的 晶状体 成 像 ,感光 细胞 
感光 ,并 且 将 光 信 号 转换 为 神经 电流 , 传 回 大 脑 引 起 人 体 视觉 。 感 光 细胞 的 感光 是 靠 一 些 感 
HER ,感光 色素 的 形成 是 需要 一 定时 间 的 ,这 就 形成 了 视觉 暂停 的 机 制 。 

视觉 暂 留 现象 首先 被 中 国人 运用 ,宋朝 时 走马 灯 便 是 据 历史 记载 中 最 早 的 视觉 暂 留 运 
用 。 随 后 法 国人 保罗 。 W ME 1828 年 发 明了 留影 盘 , 它 是 一 个 被 绳子 在 两 面 穿 过 的 圆 盘 。 
盘 的 一 个 面 画 了 一 只 鸟 , 另 一 面 画 了 一 个 空 笼子 。 当 圆 盘 旋转 时 , 鸟 在 笼子 里 出 现 了 ,这 证 
明了 当 眼 睛 看 到 一 系列 图 像 时 , 它 一 次 保留 一 个 图 像 。 

在 动画 创作 时 ,以 每 秒 5 一 30 幅 的 速度 得 到 动画 场景 (包含 运动 物体 ?瞬间 的 若干 幅 静 
止 图 片 ,每 幅 静 止 的 图 片 被 称 为 一 帧 ,然后 按照 动作 发 生 的 时 间 顺 序 , 以 相同 速度 播放 这 些 
图 片 ,利用 人 眼 视觉 暂 留 特性 ,重新 看 到 运动 场景 。 


8.1.3 传统 动画 与 WPF 动画 


在 以 往 的 程序 开发 中 ,如 果 想 构建 动画 ,需要 定时 器 和 自 定 义 的 绘图 元 素 , 并 让 这 些 绘 
图 元 素 根据 定时 器 做 出 相应 的 改变 ,以 实现 动画 效果 ,开发 难度 和 工作 量 都 是 很 高 的 。 并 且 
这 些 动画 的 拓展 性 和 灵活 性 一 般 很 弱 ,代码 量 和 复杂 度 却 很 大 。 

下 面 实现 一 个 按钮 宽度 变化 的 动画 ,在 传统 意义 上 实现 该 动画 , 则 后 台 CS 代码 如 下 。 





public partial class MainWindow : Window 
{ 
public MainWindow() 
t 
InitializeComponent(); 
) 
private void Window Loaded(object sender, RoutedEventArgs e) 
{ 
var timer = new System. Windows. Threading.DispatcherTimer(); 
timer. Tick += new EventHandler(OnTimedEvent) ; 
timer. Interval = TimeSpan. FromSeconds(1.0/20); 
timer.Start(); 
) 
int index = 0; 
private void OnTimedEvent(object sender, EventArgs e) 
1 


index; 
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if (index > 30) 
index = 0; 
button1. Width = 8 * (index); 


} 


这 段 代 码 的 功能 是 每 隔 1/20 秒 更 新 一 次 按钮 (button1) 的 宽度 ,在 2s 内 将 其 宽度 从 0 
变 为 240 ,重复 播放 。 这 是 通过 更 新 计时 器 的 传统 动画 制作 方法 。 在 WPF 中 ,实现 该 动画 
的 CS 代码 如 下 。 


private void Window Loaded(object sender, RoutedEventArgs e) 
{ 


var widthAnimation = new DoubleAnimation() 
i From- 0, 

To = 240, 

Duration = TimeSpan. FromSeconds(2), 

RepeatBehavior - RepeatBehavior. Forever, 
NM BeginAnimation(WidthProperty, widthAnimation); 

} 

传统 动画 与 WPF 动画 相 比 较 而 言 ,WPF 的 动画 的 实现 方式 更 简洁 ,可 以 与 XAML 无 
颖 集成 .运行 起 来 比 传统 动画 更 流畅 ,这 是 因为 传统 动画 的 精度 不 够 高 、 帧 率 受 限 制 。 下 面 
分 析 传统 动画 的 精度 与 帧 率 。 

传统 动画 在 UI 线程 上 修改 UI 控件 的 属性 (按钮 的 宽度 ), 因 此 DispatcherTimer 操作 
与 其 他 操作 一 样 ,需要 放置 到 Dispatcher 队列 中 , 它 并 不 能 保证 恰好 在 该 时 间 间 隔 中 。 从 某 
种 意义 上 讲 , 它 不 适合 动画 这 种 间隔 很 短 的 计时 。 

动画 的 流畅 性 一 般 取决 于 每 秒 更 新 的 帧 数 , 也 就 是 常 说 的 帧 率 。 人 眼睛 上 限 是 70 帧 ， 
而 上 述 传 统 动画 代码 是 每 秒 20 帧 的 帧 率 。 而 WPF 动画 是 根据 计算 机 的 性 能 和 当前 进程 
的 繁忙 程度 尽 可 能 地 增 大 帧 率 , WPF 动画 是 远大 于 20 帧 ,因此 要 流畅 得 多 。 

鉴于 WPF 动画 的 优势 ,读者 还 需要 了 解 WPF 的 动画 类 型 。 


8.2 动画 类 型 
WPF 动画 在 System. Windows. Media. Animation 名 称 空间 中 ,该 名 称 空间 包含 3 种 动 
画 类 型 ,它们 分 别 是 线性 插值 动画 (17 个 ) ,关键 帧 动画 (22 个 ) 和 路 径 动画 (3 个 )。 


8.2.1 线性 插值 动画 


线性 插值 动画 表现 为 元 素 的 某 个 属性 在 开始 值 和 结束 值 之 间 逐 步 增 加 的 线性 过 程 。 在 
WPF 动画 的 名 称 空间 中 ,有 17 个 线性 插值 动画 类 。 这 些 类 名 由 两 个 单词 构成 ,前 面 的 单词 
表示 线性 插值 的 类 型 名 ,第 二 个 单词 是 动画 (Animation)。 这 些 线性 插值 动画 类 分 别 是 
ByteAnimation, ColorAnimation, DecimalAnimation, DoubleAnimation, Int16 Animation, 


Int32AÀnimation, Int64Animation, Point3DAnimation, PointAnimation, QuaternionAnimation, 
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RectAnimation、Rotation3DAnimation、SingleAnimation、SizeAnimation、ThicknessAnimation、 
Vector3DAnimation 和 VectorAnimation 。 


现在 利用 DoubleAnimation ,实现 文字 的 淡 入 效果,XAML 代码 如 下 。 


<! -一 保留 Window 代码 部 分 -一 > 
Title = "MainWindow" Height = "350" Width = "525" Loaded = "Window Loaded" > 
<Grid> 
< TextBlock Height = "50" Width = "220" Foreground = "Green" FontSize = "36" 
Name = "textBlockl" Text = "文字 淡 和 效果 "/> 
</Grid> 
</Window> 


实现 文字 的 淡 入 效果 动画 ,CS 代码 如 下 。 


public partial class MainWindow : Window 




















{ 
public MainWindow() 
{ 
InitializeComponent(); 
) 
private void Window Loaded(object sender, RoutedEventArgs e) 
t 
var da = new DoubleAnimation() 
i 
From = 0，// 起 始 值 
To=1, // 结 束 值 
Duration = TimeSpan.FromSeconds(3)，// 动 画 持续 时 间 
RepeatBehavior = RepeatBehavior.Forever，// 动 画 行为 状态 
}; 
this. textBlock1. BeginAnimation( TextBlock. OpacityProperty, da); 
// 开 始 动 画 
} 
} 
运行 上 述 代码 ,页 面 显 示 效果 如 图 8. 1 所 示 。 T MairWindon EES 
再 利用 ThicknessAnimation, 实现 文字 平移 效果 ， 
ES zv 
XAML 代码 如 下 。 文字 淡 入 效果 
<! -- 保留 Window 代码 部 分 --> Fa 
Title = "MainWindow" Height = "350" Width = "525" Loaded = 图 8.1 文字 淡 入 动画 效果 
"Window_Loaded"> 
«Grid» 
< TextBlock Height = "50" Foreground = "Green" FontSize = "36" 
Name = "textBlockl" Text = "文字 平移 " Margin = "0,21,0,240" /> 
«/Grid» 
</Window> 


实现 文字 平移 效果 动画 ,CS 代码 如 下 。 


private void Window Loaded(object sender, RoutedEventArgs e) 
{ 
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var ta = new ThicknessAnimation() 


{ 


From = new Thickness(0,0,100,0), // 起 始 值 
To = new Thickness(100, 0, 0,0), // 结 束 值 
Duration = TimeSpan. FromSeconds(3), // 动 画 持续 时 间 


h 
this. textBlockl.BeginAnimation(TextBlock.MarginProperty, ta); // 开 始 动画 
} 


运行 上 述 代 码 ,文字 平移 初始 值 页 面 显示 效果 如 图 8. 2 所 示 ,文字 平移 结束 值 页 面 显示 
效果 如 图 8. 3 所 示 。 






































MainWindow boba F3 MainWindow. bolalik 
文字 平移 文字 平移 
图 8.2 文字 平移 初始 值 图 8.3 文字 平移 结束 值 


8.2.2 关键 帧 动画 


关键 帧 动画 是 以 时 间 为 结 点 ,在 指定 时 间 结 点 上 ,让 属性 达到 某 个 值 。WPF 动画 的 名 
称 空间 中 共有 22 个 关键 帧 动画 类 。BooleanAnimationUsingKeyFrame 是 布尔 关键 帧 动 
画 , 分 析 这 个 关键 帧 动画 的 命名 可 知 , WPF 关键 帧 动画 类 名 由 三 部 分 组 成 。 类 名 的 第 一 部 
分 是 关键 帧 的 类 型 名 ; 第 二 部 分 是 Animation: 第 三 部 分 是 UsingKeyFrames。 命 名 规则 : 
数据 类 型 名 十 AnimationUsingKeyFrames。 下 面 只 给 出 WPF 的 22 个 关键 帧 动画 类 名 的 数 
据 类 型 名 ,分 别 是 Boolean Bytes, Char, Color, Decimal, Double, Int16 .Int32 Int64 , Matrix, 
Object, Point3D, Point, Quaternion, Rect, Rotation3D, Single, Size, String, Thickness, 
Vector3D 和 Vector, 

现在 利用 DoubleAnimationUsingKeyFrames 关键 帧 动画 实现 一 个 弹跳 的 矩形 框 , 代 码 
中 还 用 到 事件 触发 器 (EventTrigger) 来 监视 事件 。 事 件 触发 器 的 作用 是 当 一 个 事件 发 生 
时 ,其 引发 相关 的 动画 来 响应 。XAML 代码 如 下 。 


< Canvas > 
« Rectangle Fill- "Gray" Width= "15" Height = "15"> 
< Rectangle. Triggers > 
<! -- 当 和 矩形 加 载 后 ,事件 触发 器 ,引发 动画 -一 > 
< EventTrigger RoutedEvent = "Rectangle. Loaded"> 
< BeginStoryboard > 
< Storyboard > 
<DoubleAnimation From = "0" To - "800" Duration = "0:0:10" 
Storyboard. TargetProperty = " (Canvas. Left)" 
RepeatBehavior = "Forever" AutoReverse = "True" /» 
< DoubleAnimationUsingKeyFrames Duration = "0:0:2" 
Storyboard. TargetProperty = "(Canvas. Top)" RepeatBehavior = "Forever" 
< DoubleAnimationUsingKeyFrames. KeyFrames > 
< LinearDoubleKeyFrame Value = "0" KeyTime = "0:0:0"/> 
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< LinearDoubleKeyFrame Value = "50" KeyTime = "0:0:0. 5"/> 
< LinearDoubleKeyFrame Value = "200" KeyTime = "0:0:1"/> 
< LinearDoubleKeyFrame Value = "50" KeyTime = "0:0:1. 5"/> 
< LinearDoubleKeyFrame Value = "0" KeyTime = "0:0:2"/> 
</DoubleAnimationUsingKeyFrames. KeyFrames > 
</DoubleAnimationUsingKeyFrames > 
</Storyboard > 
</BeginStoryboard > 
</EventTrigger > 
</Rectangle. Triggers > 
</Rectangle > 
</Canvas > 
</Window> 


这 里 有 两 个 移动 的 时 间 轴 。 第 一 个 移动 矩形 从 左 到 右 ,使 用 常规 的 DoubleAnimation; 
第 二 个 通过 使 用 DoubleAnimationUsingKeyFrames 控制 了 5 个 帧 垂直 的 位 置 , 如 图 8.4 所 
示 ,5 个 关键 帧 显示 了 这 个 矩形 跳动 的 顶部 和 底部 及 中 途 点 。 

代码 中 每 个 关键 帧 的 值 都 使 用 LinearDoubleKeyFrame 线性 添加 方式 ,改变 的 速度 是 
介 于 两 个 帧 之 间 的 常量 。 这 就 引起 运动 轨迹 不 是 特别 平滑 的 现象 ,如 图 8. 5 所 示 。 为 了 增 
强 动画 的 流畅 性 ,可 以 通过 添加 更 多 的 关键 帧 ,但 是 这 里 使 用 曲线 搬 值 关键 帧 ,如 图 8. 6 所 
示 ,提高 平滑 度 ,而 不 需要 添加 更 多 的 关键 帧 。 在 上 述 代码 的 基础 上 ,后 4 个 线性 插值 关键 
帧 (LinearDoubleKeyFrame) 变 为 曲线 插值 关键 帧 (SplineDoubleKeyFrame) ,变动 的 XAML 
代码 如 下 。 


< DoubleAnimationUsingKeyFrames. KeyFrames > 
< LinearDoubleKeyFrame Value = "0" KeyTime = "0:0:0"/> 
< SplineDoubleKeyFrame Value = "50" KeyTime = "0:0:0.5"/> 
< SplineDoubleKeyFrame Value = "200" KeyTime = "0:0:1"/» 
<SplineDoubleKeyFrame Value = "50" KeyTime = "0:0:1.5"/> 
<SplineDoubleKeyFrame Value = "0" KeyTime = "0:0:2"/> 
</DoubleAnimationUsingKeyFrames. KeyFrames > 


口 口 
B d 


口 
图 8.4 关键 帧 的 位 置 图 8.5 线性 插值 关键 帧 图 8.6 曲线 插值 关键 帧 


8.2.3 路 径 动画 


路 径 动画 的 表现 方式 是 修改 数值 使 其 符合 PathGeometry 对 象 描述 的 形状 ,并 且 让 元 
素 沿 着 路 径 移 动 。 虽 然 人 们 也 可 以 通过 控制 动画 的 旋转 和 偏 移 实现 对 象 的 移动 ,但 路 径 动 
画 更 专业 , 它 的 实现 更 加 简洁 明了 。WPF 中 有 3 个 路 径 动画 类 ,它们 分 别 是 
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DoubleAnimationUsingPath、MatrixAnimationUsingPath 和 PointAnimationUsingPath 。 
路 径 动 画 中 最 常用 的 是 MatrixAnimationUsingPath 路 径 动画 , 它 用 来 控制 对 象 的 
MatrixTransform 。 


现在 让 一 个 矩形 沿 着 一 个 椭圆 形 路 径 轨 迹 移动 ,在 XAML 中 放置 一 个 Button 来 控制 
动画 启动 ,XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 --» 
< Grid Height = "300" Width = "489"> 
< Path x:Name = "pathl" Stroke = "Blue" Margin = "0, 0, 0, 43"> 
< Path. Data > 
< EllipseGeometry x:Name = "ei" Center = "140,100" RadiusX = "100" RadiusY = "60" /> 
</Path. Data > 
</Path> 
< Ellipse Fill = "Green" Height = "47" Name = "ellipsel" Stroke = "Black" 
VerticalAlignment = "Top" Margin = "86,96,321,0"» 
< Ellipse. RenderTransform > 


< TransformGroup > 
< TranslateTransform X=" - 100" Y=" - 110"/> 
< MatrixTransform x:Name = "mt1"/> 
«/TransfornGroup > 


«/Ellipse. RenderTransform > 
< Ellipse. Triggers > 
< EventTrigger RoutedEvent = "Page. Loaded"> 
< BeginStoryboard > 
< Storyboard x:Name = "sbl" RepeatBehavior = "Forever"> 
< MatrixAnimationUsingPath x:Name = "mal" 
Storyboard. TargetName = "mt1" 
Storyboard. TargetProperty = "Matrix" 
Duration = "0:0:10"/> 
</Storyboard > 
</BeginStoryboard > 
</EventTrigger > 
</Ellipse. Triggers > 
</Ellipse> 
< Button Content = "动画 启动 " Height = "23" HorizontalAlignment = "Left" Margin = "0, 
202,0,0" Name = "animationButton" VerticalAlignment = "Top" Width = "75" Click = 
"animationButton_Click" /> 
</Grid> 
</Window> 


前 台 动 画 启动 按钮 的 animationButton Click 事件 的 CS 代码 如 下 。 


private void animationButton Click(object sender, RoutedEventArgs e) 
{ 
PathGeometry pgl = new PathGeometry(); 
pgi.AddGeometry(el); 
mal.PathGeometry = pgi; 
sbl.Begin(rectanglel); 
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运行 完整 的 代码 , 当 单 击 “ 动 画 启 动 ” 按 钮 后 ,矩形 框 沿 椭圆 的 轨迹 移动 ,页 面 显示 在 某 
一 时 刻 的 静态 效果 如 图 S. 7 所 示 。 在 XAML 代码 中 用 到 了 Storyboard (故事 板 )， 
Storyboard 可 以 视 作 Animation 的 容器 ,在 其 中 可 以 包含 任意 类 型 的 Timeline 和 动画 。 它 
的 两 个 附加 属性 是 Storyboard. TargetName (故事 板 的 目标 名 ) 和 Storyboard. TargetProperty 
(故事 板 的 目标 属性 )。 

再 设置 一 个 按钮 沿 曲线 移动 的 路 径 动画 ,XAML 代码 如 下 。 

<! -- 保留 Window 代码 部 分 --> 


< Canvas > 





< Canvas. Resources > 
<PathGeometry x:Key = "path" Figures = "M 10,100 C 35,0 135,0 160, 100 180, 190 
285,200 310,100" /> 
< Storyboard x:Key = "pathStoryboard" > 
*«MatrixAnimationUsingPath PathGeometry = "(StaticResource path)" 
Storyboard. TargetName = "ButtonMatrixTransform" 
Storyboard. TargetProperty = "Matrix" 
DoesRotateWithTangent - "True" 
Duration = "0:0:5" RepeatBehavior = "Forever" > 
«/MatrixAnimationUsingPath- 
«/Storyboard > 
«/Canvas. Resources » 
< Canvas. Triggers > 
< EventTrigger RoutedEvent = "Control. Loaded" 
< BeginStoryboard Storyboard = "(StaticResource pathStoryboard]" /> 
</EventTrigger > 
</Canvas.Triggers > 
< Path Data = "(StaticResource path)" Stroke = "Black" StrokeThickness = "1" /> 
< Button Width = "50" Height = "20" > 
< Button. RenderTransform > 
< MatrixTransform x:Name = "ButtonMatrixTransform" /> 
</Button. RenderTransform > 
</Button > 
</Canvas > 
</Window> 


运行 上 述 代码 ,按钮 沿 曲线 移动 ,页面 显示 在 某 一 时 刻 的 静态 效果 ,如 图 8. 8 所 示 。 其 
中 Button 使 用 了 MatrixTransform ,通过 矩阵 乘积 修改 坐标 系统 的 元 素 绘制 方式 。 
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图 8.7 ETE f DUPLI ER 2 h P 66 zl i 图 8.8 按钮 沿 曲 线 移动 的 路 径 动画 








158^ wor 编程 基础 





8.3 集成 动画 


在 做 开发 时 ,经 常会 将 动画 集成 到 系统 的 其 他 部 分 。 动 画 能 处 理 任何 值 类 型 的 任何 属 
性 ,动画 还 可 以 集成 到 控件 模板 和 文本 类 型 中 。 


8.3.1 与 控件 模板 集成 


动画 适合 于 构建 媒体 内 容 。 从 应 用 程序 开发 者 的 角度 来 看 ,能够 把 动画 谤 入 到 控件 中 。 
现在 做 一 个 具有 边框 的 标签 , 当 指 针 移 到 标签 上 ,标签 的 边框 加 粗 , 边 框 颜 色 由 原来 的 
绿色 变 为 天 蓝 色 。 


<Grid> 
< Label Width = "100" Height = "50" Content = "Welcome"> 
< Label. Template > 
<ControlTemplate TargetType = "(x:Type Label} "> 
< Border Name = "borderl" CornerRadius = "4" BorderBrush = "Green" 
BorderThickness = "2"> 
< ContentPresenter HorizontalAlignment = "Center" VerticalAlignment = 
"Center" /> 
</Border > 
< ControlTemplate. Triggers > 
< EventTrigger RoutedEvent = "Label. MouseEnter"> 
< EventTrigger. Actions > 
< BeginStoryboard > 
< Storyboard > 
< ColorAnimation To = "SkyBlue" 
Storyboard. TargetName = "border1" 
Storyboard. TargetProperty = "BorderBrush. Color" /> 
< ThicknessAnimation To = "4" 
Storyboard. TargetName = "border1" 
Storyboard. TargetProperty = "BorderThickness"/> 
</Storyboard > 
</BeginStoryboard > 
</EventTrigger. Actions > 
</EventTrigger > 
</ControlTemplate. Triggers > 
</ControlTemplate > 
</Label. Template > 
</Label> 
</Grid> 
</Window> 


运行 上 述 代码 ,标签 默认 状态 如 图 8. 9 所 示 。 当 鼠标 指针 移 到 标签 上 ,页 面 效 果 如 


图 8. 10 所 示 o 


图 8.9 标签 默认 图 8. 10 鼠标 指针 进入 
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从 上 述 代码 的 结构 可 知 ,Storyboard 被 定义 为 ControlTemplate 的 一 部 分 。 并 设置 
ControlTemplate. Triggers 属性 ,让 其 包含 EventTrigger 对 象 。 当 BeginStoryboard 与 动 
画板 关联 ,动画 则 与 模板 化 控件 Label 关联 。 


现在 再 往 ControlTemplate. Triggers 属性 中 添加 个 

EventTrigger 对 象 , 让 其 实现 鼠标 指针 离开 时 ,标签 边框 变 细 , 边 框 Welcome 
颜色 变 成 黑色 的 功能 ,页 面 效果 如 图 8. 11 所 示 。 新 增 XAML 代码 

如 下 。 


< EventTrigger RoutedEvent = "Label. MouseLeave"> 
< EventTrigger. Actions > 
< BeginStoryboard > 
< Storyboard > 
< ColorAnimation To = "Black" Storyboard. TargetName = "border1" 
Storyboard. TargetProperty = "BorderBrush. Color" /> 
< ThicknessAnimation To - "1" Storyboard. TargetName = "border1" 
Storyboard. TargetProperty = "BorderThickness"/> 





8.11 鼠标 指针 离开 


</Storyboard> 
</BeginStoryboard > 
</EventTrigger. Actions > 
</EventTrigger > 


8.3.2 与 文本 类 型 集成 


在 8.3.1 节 中 ,动画 是 集成 到 控件 模板 中 使 边框 的 精细 与 颜色 发 生变 化 ,如 何 让 动画 对 
文本 内 容 实施 动画 效果 是 本 节 的 重点 。 

因为 文本 不 是 字符 的 任意 堆砌 ,所 以 不 能 简单 地 把 文本 分 割 为 以 字符 大 小 为 标尺 进行 
变换 操作 。 每 个 TextEffects 对 象 都 包含 Transform、PositionStart 和 PositionCount 的 实 
例 , 其 决定 着 字符 的 效果 。 

实现 对 文本 类 型 动画 。 动 画 效果 形式 为 : 每 个 字符 以 不 同 的 时 间 移 动 , 使 用 编程 的 方 
式 来 创建 动画 更 容易 。XAML 代码 如 下 。 


<Grid> 
< TextBlock FontSize = "24pt" Name = "textblockl" Foreground = "Green" > I am a textblock 
with animation 
</TextBlock > 
</Grid> 


后 台 CS 代码 如 下 。 


public partial class MainWindow : Window 
{ 
public MainWindow() 
{ 
InitializeComponent() ; 
Storyboard perChar = new Storyboard(); 
textblockl. TextEffects = new TextEffectCollection(); 
for (int i=0; i< textblock1. Text. Length; i++) 
{ 
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TextEffect te = new TextEffect(); 
te. Transform = new TranslateTransform(); 
te.PositionStart- i; 
te. PositionCount = 1; 
textblock1l.TextEffects.Add(te); 
DoubleAnimation da = new DoubleAnimation(); 
da.To-9; 
da. AccelerationRatio = .5; 
da.DecelerationRatio = .5; 
da. RepeatBehavior = RepeatBehavior. Forever; 
da. AutoReverse = true; 
da. Duration = TimeSpan. FromSeconds(2) ; 
da. BeginTime = TimeSpan. FromMilliseconds(250 * i); 
Storyboard. SetTargetProperty (da, new PropertyPath(" TextEffects[" + i * "] 
. Transform. Y")) ; 
Storyboard. SetTargetName(da, textblockl. Name); 
perChar. Children. Add(da) ; 

) 

perChar. Begin(this); 


} 


运行 完整 的 代码 ,动画 效果 如 图 8. 12 所 示 。 分 析 代 码 的 结构 ,因为 要 为 每 个 字符 创建 
效果 ,所 以 要 读 取 文本 的 长 度 ,用 for 循环 实现 这 一 迭代 过 程 。 在 for 循环 中 ,构建 
TextEffect 对 象 ,把 字符 的 起 始点 和 数目 关联 到 效果 上 ,并 且 为 动画 创建 一 个 变换 。 当 然 还 
需 创建 一 个 动画 版 ,用 于 处 理 已 创建 好 的 多 个 TextEffect 对 象 内 容 的 变换 。 


WiMeinWindow 0 CER — l-lok 
I am a textblock with animation 


























图 8.12 TextEffects 设置 文本 动画 效果 


8.4 1 体 


在 WPF 中 ,对 于 媒体 可 以 简单 地 定义 为 “与 时 间 相 关 的 数据 流 ”。 基 于 这 个 定义 ,前 面 
所 看 到 的 动画 ,从 技术 上 而 言 .都 是 媒体 的 一 个 片段 。 但 是 在 本 节 中 ,讨论 的 重点 是 常见 的 
外 部 媒体 类 型 : 音频 和 视频 。 音 频 文 件 是 以 时 间 为 组 织 形式 的 波形 内 容 ; 视频 文件 则 是 以 
时 间 组 织 的 光栅 图 像 。 下 面 学 习 在 WPF 中 如 何 播放 音频 与 视频 两 类 文件 。 


8.4.1 音频 


WPF 中 音频 与 视频 文件 都 是 通过 MediaTimeline。 在 任何 音频 和 视频 中 ,都 存在 时 间 
线 。 当 要 播放 媒体 时 ,需要 MediaClock。 

播放 音频 文件 ,需要 如 下 3 个 步骤 。 

(1) 首先 需要 创建 一 个 MediaTimeline 的 实例 ,并 设置 Source 属性 来 指向 媒体 。 
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(2) 需要 创建 运行 时 钟 。 时 钟 对 普通 动画 而 言 是 必要 的 。 但 对 于 媒体 文件 , 则 需要 
MediaPlayer 来 管理 媒体 的 状态 。 

G) 为 了 给 用 户 友好 的 提示 ,把 CurrentTimeInvalidated 事件 挂 接 到 时 钟 上 ,并 更 新 
Window. Title 属性 ,用 来 显示 音乐 播放 时 间 状 态 。 

CS 代码 如 下 。 


public partial class MainWindow : Window 
( 
MediaTimeline audioTL; 
MediaClock audioC; 
public MainWindow() 
1 
InitializeComponent(); 
audioTL = new MediaTimeline(); 
audioTL. Source = new Uri((2"f:VTry Everything.mp4"); 
audioC = audioTL. CreateClock(); 
MediaPlayer player - new MediaPlayer(); 
player.Clock - audioC; 
audioC. CurrentTimeInvalidated += TimeChanged; 
audioC. Controller. Begin(); 


void TimeChanged(object sender, EventArgs e) 


{ 
Title = audioC. CurrentTime. ToString(); 


} 
} 
运行 上 述 代 码 ,页 面 显示 效果 如 图 8. 13 所 示 。 代 码 中 用 到 时 间 线 \ 时 钟 和 播放 器 3 个 
对 象 ,对 于 任何 媒体 播放 的 场景 都 是 通用 的 。WPF 使 用 MediaElement 类 型 隐藏 了 这 些 
细节 。 
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图 8.13 音乐 播放 状态 


MediaElement 通过 Player 属性 提供 对 播放 器 的 访问 ,但 对 于 高 级 的 媒体 动作 , 则 需要 
在 代码 中 创建 时 间 线 和 时 钟 。 如 上 面 代码 中 用 到 的 CurrentTimeInvalidated 事件 。 
8.4.2 视频 

使 用 上 面 提 到 的 MediaElement 来 播放 视频 ,XAML 代码 如 下 。 

<Grid> 


< MediaElement Source = "f :\ J K AEX 3. mp4" /> 
</Grid> 
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运行 上 述 代码 ,视频 播放 页 面 显示 效果 如 图 8. 14 所 示 。 





E MainWindow l= ¥ 











图 8.14 MediaElement 播放 视频 


8.5 小 结 
动画 是 增强 用 户 视觉 体验 的 一 种 有 效 手 段 。 本 章 从 动画 的 基本 概念 出 发 ,学 习 了 动画 
的 基本 原理 ,对 比 了 传统 动画 与 WPF 动画 ,介绍 了 WPF 动画 的 三 种 类 型 和 集成 动画 的 方 
式 ,以 及 WPF 中 播放 音频 与 视频 两 类 文件 的 方法 。 
习题 与 实验 8 


1. 简 述 动画 的 概念 及 原理 。 
2. 设计 实现 文字 淡 入 ,文字 移动 效果 动画 ,如 图 8. 15 和 图 8. 16 所 示 。 





图 8.15 文字 淡 和 人 效果 图 8.16 文字 移动 效果 


3. 实现 椭圆 沿 和 矩形 轨迹 移动 的 路 径 动画 ,由 按钮 控制 开始 ,程序 启动 后 ,初始 页 面 如 
图 8. 17 所 示 。 当 单 击 “ 动 画 启动 ”按钮 后 .椭圆 沿 和 矩形 轨迹 移动 的 动画 ,页 面 显 示 在 某 一 时 
刻 的 静态 效果 ,如 图 8. 18 所 示 。 
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图 8.17 路 径 动画 初始 页 面 图 8.18 沿 矩 形 轨迹 移动 动画 


4. 实现 小 人 快 跑 动画 ,如 图 8. 19 和 图 8. 20 所 示 。 分 析 动 画 功能 , 则 为 两 图 中 的 两 个 
图 片 的 切换 ,还 可 以 通过 帧 的 进度 控制 跑步 的 速度 。 















































图 8.19 站立 的 小 人 页 面 图 8.20 运动 的 小 人 页 面 





动作 


前 面 的 学 习 内 容 围绕 着 应 用 程序 使 用 控件 构建 及 其 不 同 的 呈现 方式 ,这 些 都 属于 平台 
之 外 的 事物 ,本 章 将 接触 平台 内 部 的 东西 。 通 常 , 当 用 户 单 击 按钮 、 按 下 鼠标 、 移 动 鼠 标 、 触 
摸 屏幕 等 时 ,希望 应 用 程序 能 以 某 种 方式 来 响应 这 些 动作 。WPF 具有 3 个 处 理 动作 的 常用 
方式 , 即 事件 、 命 令 和 触发 器 。WPF 将 事件 扩充 到 路 由 事件 ,在 第 6 章 已 详细 讲解 过 。 本 童 
重点 介绍 动作 原则 命令 系统 及 触发 器 的 使 用 。 


9.1 动作 原则 


WPF 动作 的 3 个 原则 是 元 素 合成 、 松 散 耦 合 和 声明 式 动作 。 在 第 1 章 的 WPF 可 视 化 
树 , 显 示 了 多 个 元 素 协同 工作 ,这 就 要 求 动作 采用 元 素 合成 的 机 制 。 如 若 事件 的 代码 和 事件 
处 理 过 程 的 代码 紧密 耦合 在 一 起 , 则 控件 能 改变 显示 界面 的 行为 会 引发 一 些 问 题 , 所 以 松散 
耦合 是 合理 的 行为 。 最 后 ,声明 式 的 编程 延伸 到 系统 的 各 方面 ,故此 ,WPF 以 声明 的 方式 处 
理 动作 。 


9.1.1 元 素 合成 


在 前 面 的 学 习 中 ,了 解 到 控件 模型 的 3 个 原则 : 元 素 合成 、 富 内 容 和 简单 的 编程 模型 。 

现在 从 简单 的 编程 模型 出 发 ,用 单 击 事件 的 监听 代码 ,把 处 理 过 程 附 加 到 Click 事件 ， 
代码 如 下 。 

Button b= new Button(); 

b. Content 7 "Click me"; 

b.Click += delegate { MessageBox. Show(" You clicked me"); }; 

分 析 代 码 ,按钮 本 身 并 没有 被 单 击 ,被 单 击 的 是 按钮 显示 界面 元 素 , 为 了 让 这 些 元 素 协 
同 工 作 ,WPF 引入 了 RoutedEvent( 路 由 事件 ) ,路 由 事件 可 以 穿越 元 素 , 对 上 面 的 代码 进行 
修改 ,修改 后 的 代码 如 下 。 

Button b= new Button(); 

b. Content = new Button(); 

b. Click += delegate ( MessageBox. Show(" You clicked me"); }; 

分 析 代 码 ,第 二 个 按钮 作为 第 一 个 按钮 的 内 容 , 此 时 ,无 论 单 击 内 部 或 外 部 的 按钮 都 将 
引起 事件 的 触发 。 元 素 合成 的 设计 会 影响 到 动作 的 处 理 及 事件 本 身 。 
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9.1.2 松散 耦合 


现在 还 以 Button 按钮 为 例 , 它 支持 直接 的 鼠标 事件 (MouseUp、MouseDown 等 ) ,也 支 
FF Click 事件 。Click 事件 是 比 鼠标 事件 更 高 级 的 抽象 。 在 按钮 处 于 键盘 焦点 下 , 按 下 键盘 
上 的 Enter 键 时 ,Click 事件 也 会 被 触发 。 可 以 把 鼠标 事件 看 作物 理 (Physical) 事 件 ,Click 
事件 看 作 语义 (Semantic) 事 件 。 

支持 Click 事件 的 控件 除了 Button 以 外 ,还 有 CheckBox, RadioButton 和 HyperLink. 
只 要 这 些 控件 被 单 击 ,都 会 触发 Click 事件 。 针 对 Click 事件 编写 代码 有 两 个 好 处 : 并 不 局 
限 在 某 种 特定 的 输入 设备 上 (鼠标 或 键盘 ) ,也 不 是 约束 在 按钮 上 。 此 时 Click 事件 的 代码 
编写 只 依赖 于 这 个 控件 是 否 能 被 单 击 。 把 代码 和 动作 产生 过 程 进行 解 耦 ,处 理 过 程 更 灵活 。 
但 是 ,尽管 如 此 ,事件 本 身 还 是 受到 耦合 形式 的 约束 ,要 求 方法 实现 是 某 个 特定 的 签名 
(Signature), Button. Click 的 委托 定义 形式 如 下 。 


public delegate void RoutedEventHandler(object sender, RoutedEventArgs e); 


WPF 的 动作 耦合 波谱 如 图 9. 1 所 示 。 它 支持 从 物理 事件 (如 MouseUp) 下 的 紧密 耦合 
到 完全 语义 提醒 (如 ApplicationCommands. Close) 的 方式 。 


MouseUp 事 件 cid 事件 Close 命 令 
紧 松 


图 9.1 动作 耦合 波谱 


由 于 松散 耦合 ,可 以 编写 模板 ,让 控件 产生 意 想不到 的 效果 。 
现在 通过 添加 一 个 和 Close 命令 (Command) 挂 接 的 按钮 ,为 窗口 编写 一 个 模板 ,实现 
关闭 窗口 的 功能 。XAML 代码 如 下 。 


< ControlTemplate TargetType = "(x:Type Window}"> 
«Grid» 
<StatusBar > 
< StatusBarItem > 
< Button 
Command = " (x:Static ApplicationCommands. Close}"> 
Close 
</Button > 
</StatusBarItem > 
</StatusBar > 
</Grid> 
</ControlTemplate> 


在 任何 组 件 上 引发 了 Close 命令 时 ,要 通过 命令 绑 定 添加 到 窗口 中 让 窗口 关闭 ,后 台 
CS 代码 如 下 。 
public partial class MainWindow : Window 


{ 
public MainWindow() 


166! wpF 编程 基础 





{ 
InitializeComponent(); 
CommandBindings. Add(new CommandBinding (ApplicationCommands. Close, CloseExecuted)) ; 
) 
void CloseExecuted(object sender, ExecutedRoutedEventArgs e) 
{ 
this.Close(); 
) 
i; 
命令 在 WPF 中 表示 了 最 松散 的 耦合 动作 模型 。 在 本 例 中 ,动作 耦合 提供 了 完全 抽象 
的 描述 ,可 以 改变 窗口 风格 以 使 用 完全 不 同 的 控件 ,而 不 会 破坏 任何 动作 的 运转 。 


9.1.3 声明 式 动作 


声明 式 编 程 的 概念 是 WPF 编程 的 基础 。 声 明 式 逻辑 为 用 户 带 来 良好 的 体验 ,并 为 系 
统 提供 高 级 的 服务 。 

处 理 动作 的 所 有 机 制 都 支持 这 些 原则 。 由 于 WPF 路 由 事件 已 经 在 前 面 重点 学 习 , 因 
此 下 面 需要 深入 了 解 命令 系统 。 


9.2 命令 系统 


WPF 为 人 们 准备 了 完善 的 命令 系统 ,读者 也 许 会 有 这 样 的 疑问 :“ 有 了 路 由 事件 为 什 
么 还 需要 命令 系统 ?” 因 为 事件 的 作用 是 发 布 , 传 播 消息 ,消息 传达 到 了 接收 者 ,事件 完成 。 
至 于 如 何 响应 事件 送 来 的 消息 ,事件 并 不 做 任何 限制 ,每 个 接收 者 用 自己 的 行为 来 响应 事 
件 。 这 就 是 说 ,事件 不 具有 约束 力 ,而 命令 具有 约束 力 , 这 是 两 者 的 本 质 区 别 。 

在 实际 编程 工作 中 ,只 用 事件 而 不 用 命令 程序 的 逻辑 一 样 被 驱动 得 很 好 。 以 “保存 事件 
的 处 理 器 ?为 例 ,程序 员 可 以 编写 SaveO ,SaveHandle O fll SaveDocument() 等 ,这 些 都 符合 
代码 规范 。 但 迟早 有 一 天 ,整个 项 目 会 变 得 让 人 无 法 读 懂 ,新 来 的 程序 员 或 修改 Bug 的 程 
序 员 会 受阻 。 如 果 使 用 命令 ,情况 就 会 好 很 多 。 当 Save 命令 到 达 某 个 组 件 时 ,命令 会 自动 
地 去 调用 组 件 的 Save 方法 。 而 这 个 方法 可 能 定义 在 基 类 或 接口 中 ( 即 保证 了 这 个 方法 是 一 
定 存在 的 ) ,这 样 一 来 ,约束 了 代码 结构 和 命名 规则 。 还 可 控制 接收 者 “ 先 做 校 验 ,再 保存 ,最 
后 退出 ”。 也 就 是 说 命令 除了 可 以 约束 代码 ,还 可 以 约束 步骤 逻辑 ,让 新 来 的 程序 员 避 免 犯 
错 , 也 让 修改 Bug 的 程序 员 有 规律 可 循 。 

从 上 面 的 分 析 可 知 ,命令 可 以 看 作 一 种 逻辑 约束 行为 ,但 这 种 逻辑 约 东 行为 可 以 被 多 种 
源 调用 ,可 以 作用 于 多 种 目标 上 。 如 “复制 “前 切 ” 等 命令 ,它们 本 身 就 是 一 种 对 剪贴 板 进行 
操作 的 逻辑 约束 行为 。 这 些 命令 可 以 用 在 菜单 项 中 ,也 可 以 在 工具 栏 按 钮 上 使 用 ,还 可 以 通 
过 快捷 键 (Ctrl 十 C) 来 调用 。 由 此 可 见 , 命 令 就 像 类 (封装 了 多 种 信息 ), 可 以 在 多 个 地 方 
调用 。 

下 面 学 习 命令 系统 的 基本 元 素 及 元 素 间 的 关系 。 


9.2.1 基本 元 素 及 元 素 之 间 的 关系 
WPF 命令 系统 包含 命令 、 命 令 源 、 命 令 目 标 和 命令 绑 定 4 个 基本 元 素 ,详细 介绍 如 下 。 


mog am 





ft (Command) : 要 执行 的 动作 ,继承 自 ICommand 接口 的 类 ,经 常 使 用 的 有 
RoutedCommand 类 ,但 是 ,在 实际 使 用 中 ,一 种 有 效 的 方法 是 在 某 个 类 中 直接 声明 
一 个 RoutedCommand 类 的 成 员 字 段 ,一 般 使 用 Static 关键 字 ,这样 可 以 使 得 命令 只 
与 类 有 关 ,而 不 必 理 会 其 属于 哪个 实例 。 
命令 源 (CommandSource) : 命令 的 发 送 者 ,继承 自 ICommandSource 接口 的 类 。 大 
部 分 界面 的 控件 都 实现 了 这 个 接口 ,如 Button, Menultem 等 。 
命令 目标 (CommandTarget) : 命令 的 接收 者 ,继承 自 IInputElement 接口 的 类 。 例 
如 ,给 文本 框 中 粘贴 内 容 ,那么 这 个 TextBox 就 是 命令 目标 。 
命令 绑 定 (CommandBinding): 将 一 些 逻 辑 与 命令 绑 定 起 来 ,如 判断 命令 是 否 可 以 
执行 ,以 及 执行 完毕 后 做 一 些 处理 。 

基本 元 素 之 间 的 关系 体现 在 使 用 命令 的 过 程 中 ,使 用 命令 可 分 为 以 下 几 个 步 又。 

CD 创建 命令 类 。 它 是 获得 一 个 实现 ICommand 接口 的 类 的 实例 。 

(2) 声明 命令 实例 ,使 用 命令 时 需要 创建 命令 类 的 实例 。 

(3) 指定 命令 的 源 ,指令 由 谁 来 发 送 这 个 命令 。 

(4) 指定 命令 目标 。 命 令 目标 不 是 命令 的 属性 ,而 是 命令 源 的 属性 ,是 告知 命令 源 向 哪 
个 组 件 发 送 命令 ,如 果 没 有 给 命令 源 指 定 命令 的 目标 , 则 系统 会 把 当前 拥有 焦点 的 对 象 当 作 
命令 目标 。 

(5) 设置 命令 绑 定 。 命 令 系 统 需 要 CommandBinding 在 执行 命令 前 不 断 地 问 询 是 不 是 
可 以 执行 ,并 且 在 命令 执行 完毕 给 出 反馈 。 

命令 目标 与 命令 绑 定 间 的 关系 是 , 当 某 个 UI 控件 被 命令 源 确定 为 目标 后 ,命令 源 就 会 
不 停 地 向 命令 目标 发 送 可 路 由 的 PreviewCanExecute 和 CanExecute 附加 事件 ,事件 会 沿 着 
UI 逻 辑 树 向 上 传递 并 被 命令 绑 定 获知 ,命令 绑 定 并 将 获知 的 消息 实时 报告 给 命令 。 与 此 相 
似 , 如 果 命 令 被 发 送出 来 并 到 达 命 令 目 标 , 命 令 目 标 则 会 发 送 PreviewExecuted 和 Executed 
两 个 附加 事件 。 这 两 个 事件 也 会 沿 着 UI 逻辑 树 向 上 传递 并 被 命令 绑 定 所 获知 ,对 于 那些 
与 业务 逻辑 无 关 的 通用 命令 ,这 些 后 续 任 务 才 是 最 重要 的 。 

上 述 WPF 命令 描述 过 程 ,可 知 命令 系统 的 基本 元 素 关系 图 ,如 图 9. 2 所 示 。 
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图 9.2 WPF 命令 系统 的 基本 元 素 间 的 关系 


现在 定义 编辑 (Edit) 菜 单 , 其 下 包含 复制 (Copy)、 剪 切 (Cut) 和 粘贴 (Paste)3 个 菜单 
项 ,这 些 菜 单项 对 菜单 下 的 文本 框 (TextBox) 内 容 进行 编辑 操作 。 菜 单项 通过 WPF 命令 的 
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形式 实现 ,XAML 代码 如 下 。 


«Grid» 
< Grid. RowDef initions > 
< RowDef inition Height = "23" /> 
< RowDefinition /> 
</Grid. RowDefinitions> 
« Menu Grid. Row 7 "0" Grid. Column = "0"> 
< MenuItem Header = "Edit" 
< MenuItem x:Name = "menuCopy" Header = "Copy" 
Command = "ApplicationCommands. Copy" 
ConmandTarget = " (Binding ElementName = textBoxl]"/^ 
< MenuItem x:Name = "menuCut" Header = "Cut" 
Conmand = "ApplicationCommands.Cut" /> 
< MenuItem x:Name = "menuPaste" Header = "Paste" 
Conmand = "ApplicationCommands.Paste" /> 
</MenuItem> 
</Menu> 
< TextBox Grid. Row = "1" Grid. Column = "0" x:Name = "textBox1" 
TextWrapping = "Wrap" AcceptsReturn = "True" /> 
«/Grid» 


运行 上 述 代 码 ,在 textboxl 中 键入 信息 后 , 单 击 Edit 菜单 ,页 面 显示 效果 如 图 9. 3 所 示 。 
4&3 MainWindow [EI 

















9.3 WPF 命令 实现 Edit 菜单 


分 析 上 述 代 码 ,与 命令 系统 中 的 基本 元 素 相 对 应 ,此 例 中 ApplicationCommands. Copy, 
ApplicationCommands. Cut 和 ApplicationCommands. Paste 是 命令 ,这 些 命令 赋值 给 了 菜 
单项 的 Command 属性 ,实现 了 ICommandSource 接口 的 元 素 都 拥有 该 属性 ,其 Command 
属性 就 指示 了 其 将 引发 的 命令 ; 3 个 Menultem 控件 是 命令 源 ; textboxl 文本 框 就 是 命令 
目标 ; 命令 绑 定 到 系统 定义 ,对 于 文本 框 的 “复制 “ 剪 切 ”和 “粘贴 ”操作 。 

在 WPF 的 命令 系统 中 的 4 个 基本 元 素 都 派生 自 不 同 的 类 ,它们 所 在 的 类 之 间 的 调用 
关系 如 图 9.4 所 示 。 

由 图 9.4 可 知 , WPF 命令 系统 中 的 命令 绑 定 (CommandBinding) 是 将 一 个 命令 与 实现 
该 命令 的 事件 处 理 程序 关联 。CommandBinding 类 包含 一 个 Command 属性 以 及 Executed、 
PreviewExecuted PreviewCanExecute 和 CanExecute 事件 。Command 是 CommandBinding 要 与 
之 关联 的 命令 。 附 加 到 PreviewExecuted 和 Executed 事件 的 事件 处 理 程序 实现 命令 逻辑 。 
附加 到 PreviewCanExecute 和 CanExecute 事件 的 事件 处 理 程序 确定 命令 是 否 可 以 在 当前 
命令 目标 上 执行 。CanExecute 事件 和 PreviewCanExecute 事件 ,通过 其 EventArgs 参数 中 
的 CanExecute 属性 ,设置 其 命令 是 否 可 以 执行 ,并 且 系 统 会 自动 地 与 命令 目标 的 某 些 特定 
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9.4 WPF 命令 系统 的 基本 元 素 派生 类 之 间 的 调用 关系 


属性 进行 绑 定 , 如 Button, Menultem 等 在 CanExecute 属性 的 值 设 为 False 时 ,会 “ 灰 化 ” ,不 
可 用 。Executed 事件 和 PreviewExecuted 事件 的 代码 ,是 执行 命令 的 真正 代码 。 

对 上 面 的 菜单 ,再 加 一 个 文件 菜单 ,将 ApplicationCommands. Save 绑 定 到 菜单 栏 的 
Save 菜单 项 中 , 当 文 本 框 中 没有 文本 时 不 可 用 。 实 现 文件 菜单 , 需 添 加 Window 命令 绑 定 
的 XAML 代码 如 下 。 


< Window. InputBindings > 
< KeyBinding Command = "ApplicationCommands. Save" /» 
«/Window. InputBindings > 
< Window. CommandBindings > 
« CommandBinding Command - "ApplicationCommands. Save" 
CanExecute - "CommandBinding Save CanExecute" 
Executed = "CommandBinding Save Executed" /> 
«/Window. CommandBindings > 


编写 File 菜单 下 的 Save 菜单 项 的 XAML 代码 如 下 。 


< MenuItem Header = "File"> 
< MenuItenm x:Name = "menuSave" Header = "Save" 
Command = "ApplicationCommands.Save" /> 
</MenuItem> 


后 台 实 现 Save 命令 的 事件 处 理 程序 的 CS 代码 如 下 。 


private void CommandBinding Save CanExecute(object sender, CanExecuteRoutedEventArgs e) 
{ 
if (textBoxl.Text == string. Empty) 
{ ”// 如 果 文 本 框 中 没有 任何 文本 , 则 不 可 以 保存 
e. CanExecute = false; 
) 
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else 
{ 
e. CanExecute = true; 

) 
} 
private void CommandBinding Save Executed(object sender, ExecutedRoutedEventArgs e) 
{ ”// 保存 文件 对 话 框 

SaveFileDialog save = new SaveFileDialog(); 

save. Filter = "文本 文件 t| * .txcl Pi xp t| x. x"; 

bool? result = save. ShowDialog(); 

if (result. Value) 


// 执行 保存 文件 操作 
} 


运行 完整 的 代码 , 若 文本 框 中 无 文本 , 单 击 Save 菜单 项 后 ,命令 不 可 用 ,页 面 显 示 效 果 
如 图 9.5 所 示 。 
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图 9.5 WPF 命令 实现 文件 菜单 的 不 可 用 状态 
文本 框 中 输入 文本 后 , 单 击 File 菜单 后 ,Save 菜单 项 可 用 ,页 面 显示 效果 如 图 9.6 所 示 。 
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9.6 WPF 命令 实现 文件 菜单 的 可 用 状态 


9.2.2 ICommand 接口 


WPF 命令 系统 的 核心 是 System. Windows. Input. ICommand 接口 ,而 且 WPF 中 的 命 
令 都 继承 自 ICommand 接口 。 该 接口 定义 了 命令 的 工作 原理 , 它 包 含 两 个 方法 和 一 个 事 
件 , 定 义 如 下 。 


public interface ICommand 

{ 
void Executed(object parameter); 
bool CanExecute(object parameter); 
event EventHandler CanExecuteChanged; 
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还 有 一 些 类 继承 自 ICommandSource, 这些 类 包括 ButtonBase, Menultem, Hyperlink 
和 InputBinding。 而 Button GridViewColumnHeader、ToggleButton 和 RepeatButton 继承 
自 ButtonBase。System. Windows. Input. KeyBinding 和 MouseBinding 继承 自 InputBinding。 


9.2.3 RoutedCommand 类 


创建 命令 时 ,不 会 直接 实现 ICommand 接口 ,而 是 使 用 System. Windows. Input. Routed 
Command 类 ,该 类 自动 实现 ICommand 接口 。RoutedCommand 类 是 WPF 中 唯一 实现 了 
ICommand 接口 的 类 。 所 有 WPF 命令 都 是 RoutedCommand 类 (及 其 派生 类 ) 的 实例 。 

WPF 命令 系统 中 的 一 个 重要 概念 RoutedCommand 类 不 包含 任何 应 用 程序 逻辑 。 它 
只 是 代表 一 个 命令 。 这 意味 着 各 个 RoutedCommand 对 象 具 有 相同 的 功能 。 

RoutedCommand 类 为 事件 骨 泡 和 隧道 添加 了 一 些 额外 的 基础 结构 。 鉴 于 ICommand 
接口 封装 了 命令 的 思想 ,可 以 被 触发 的 动作 并 且 可 以 被 启用 或 禁用 一 一 RoutedCommand 
类 对 命令 进行 了 修改 ,从 而 使 命令 可 以 在 WPF 元 素 层 次 结构 中 骨 泡 以 便 获得 正确 的 事件 
处 理 程序 。 


9.2.4 RoutedUICommand 类 


在 程序 中 处 理 的 大 部 分 命令 不 是 RoutedCommand 对 象 ,而 是 RoutedUICommand 类 
的 实例 ,RoutedUICommand 类 继承 自 RoutedCommand 类 。 事 实 上 ,WPF 提供 的 所 有 预先 
构建 好 的 命令 都 是 RoutedUICommand 对 象 。 

RoutedUICommand 类 用 于 创建 具有 文本 属性 的 命令 ,这 些 文本 显示 在 用 户 界面 中 的 
某 些 地 方 ( 如 菜单 项 文本 .工具 栏 按钮 的 工具 提示 )。RoutedUICommand 类 只 增加 了 一 个 
Text 属性 , 它 是 为 命令 显示 的 文本 。 

为 命令 定义 命令 文本 ,而 不 是 直接 在 控件 上 定义 文本 的 优点 是 可 在 一 个 位 置 执行 本 地 
化 。 但 是 如 果 命 令 文本 永远 不 会 在 用 户 界面 上 的 任何 地 方 显示 ,此 时 RoutedUICommand 
类 和 RoutedCommand 类 是 等 效 的 。 


9.2.5 WPF 命令 库 


WPF 中 提供 了 一 些 便捷 的 命令 库 , 它 们 是 ApplicationCommands、MediaCommands、 
ComponentCommands、NavigationCommands 和 EditingCommands。 下 面 给 出 WPF 命令 


库 的 类 及 命令 值 ,如 表 9. 1 所 示 。 
表 9.1 命令 库 及 命令 值 




















命令 类 RT ü 
ApplicationCommands Close, Cut, Copy, Paste, Save, Print 
NavigationCommands BrowseForward, BrowseBack , Zoom Search 
EditingCommands AlignXXX, MoveXXX, Select XXX 
MediaCommands Play, Pause, NextTrack,IncreaseVolume, Record, Stop 
ComponentCommands MoveXXX,SelectXXX ScrollXXX ExtendSelectionXXX 
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表 9.1 中 的 XXX 代表 操作 的 集合 ,如 MoveNext 和 MovePrevious。 其 中 ,Application- 
Commands 为 默认 的 命令 类 ,引用 其 中 的 命令 时 可 以 省 略 ApplicationCommands。 


9.2.6 命令 与 数据 绑 定 


WPF 中 的 大 部 分 事件 都 和 每 个 控件 的 实现 紧密 关联 ,用 户 在 自 定义 命令 时 ,通常 都 会 
使 用 事件 。 

现在 以 关闭 程序 为 例 ,首先 在 File 菜单 中 的 菜单 项 关闭 程序 ,使 用 XAML 的 代码 
如 下 。 


< Menultem Header = "File"> 
< MenuItem x:Name = "nenuExit" Header = "Exit" Click = "ExitClicked"/> 
«/MenuItem > 


后 台 实现 关闭 命令 的 事件 处 理 程序 的 CS 代码 如 下 。 


private void ExitClicked(object sender, RoutedEventArgs e) 
{ 

Application. Current. Shutdown(); 
} 


下 面 添加 退出 应 用 程序 的 超级 链接 控件 到 文本 块 (TextBlock) ,用 TextBlock 控件 替换 
原 代码 中 的 TextBox 控件 ,XAML 代码 如 下 。 


< TextBlock Grid. Row= "1" Grid. Column = "0" > Welcome to my program. If you fell bored, 
you can < Hyperlink Click = "ExitClicked"» exit «/Hyperlink > 
«/TextBlock > 
将 关闭 程序 代码 添加 到 前 面 的 案例 中 ,运行 完整 的 代码 程序 ,页 面 显 示 效 果 如 图 9. 7 所 
示 。ExitClicked 的 签名 和 Hyperlink. Click 事件 是 兼容 的 ,它们 都 是 执行 退出 应 用 程序 的 
命令 。 另 外 ,可 以 把 命令 的 事件 处 理 程 序 添加 到 XAML 代码 中 ,所 以 图 形 设计 器 在 为 应 用 
程序 构建 UI 时 ,无 须知 道 其 续 写 到 哪里 。 
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9.7 事件 处 理 程序 与 超 链 接 实现 退出 命令 
现在 在 菜单 上 放置 “ 重 做 ”和 “撤销 ”两 个 菜单 ,XAML 代码 如 下 。 


< MenuItem Command = "ApplicationCommands.Redo" Header = "(Binding 
Path = Command. Text, RelativeSource = (RelativeSource Self]]"/» 
« MenuItem Command = "ApplicationCommands.Undo" Header - "(Binding 
Path = Command. Text, RelativeSource = (RelativeSource Self]]"/» 
运行 上 述 代码 ,页 面 显示 效果 如 图 9. 8 所 示 。 其 中 ,“ Header =" (Binding Path = 
Command, Text, …}"" 代 码 中 的 菜单 文本 绑 定 到 了 命令 的 Text 属性 。 因 为 , 当 一 个 命令 
为 RoutedUICommand 类 型 ,那么 该 命令 将 有 一 个 Text 属性 来 说 明 该 命令 对 应 到 的 文本 名 
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Tk. WE Text 属性 会 自动 本 地 化 的 ,由 于 当前 的 计算 机 使 用 语言 是 简体 中 文 的 , 故 该 菜单 项 
显示 的 是 “ 重 做 、 撤 销 ”, 如 果 计 算 机 使 用 的 语言 是 英语 ,菜单 项 显示 的 将 是 “Redo、Undo”。 
Er 
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图 9.8 命令 绑 定 实现 * 重 做 "和 ”撤销 ?菜单 


由 于 Command 和 CommandParameter 都 是 元 素 上 的 属性 ,因此 它 能 够 被 设置 成 数据 ， 
这 就 使 得 命令 和 数据 绑 定 集成 到 一 起 。 使 用 命令 也 可 以 实现 数据 驱动 的 逻辑 。 

现在 在 上 面 案 例 的 基础 上 ,添加 一 个 列表 框 和 用 于 显示 每 个 文件 名 的 数据 模板 ， 
XAML 代码 如 下 。 


< ListBox Name = "listBox1"> 
< ListBox. ItemTemplate > 
<DataTemplate > 
< TextBlock Text = "(Binding Path = Name} " /> 
</DataTemplate> 
«/ListBox. ItemTemplate > 
</ListBox > 


在 后 台 , 将 ItemsSource 属性 设置 为 文件 的 列表 ,CS 代码 如 下 。 


public MainWindow() 

( 
InitializeComponent(); 
FileInfo[] fileList = new DirectoryInfo("c: WM"). GetFiles(" * . * "); 
listBoxl.ItemsSource = fileList; 


运行 完整 的 代码 ,页 面 显示 效果 如 图 9. 9 所 示 。 


To 
Edit File Xe SŠ 

lam a TextBox 

bootmgr 

console.log 

demo.txt 

hiberfil.sys 

KLOTX 


pagefile.sys 
vcredist x86Jog 


































图 9.9 显示 文件 列表 


下 面 添加 一 个 用 来 显示 文件 的 按钮 ,并 且 只 显示 文本 文件 。 所 以 ,需要 在 加 载 的 文件 上 
提供 某 种 类 型 的 过 滤器 ,以 实现 Blocked 和 Open 两 个 命令 ,后台 的 CS 代码 如 下 。 


public partial class MainWindow : Window 
{ 


174] wpF 编程 基础 





public static readonly RoutedCommand BlockedCommand = new RoutedCommand(" Blocked", 
typeof (MainWindow)); 

public static readonly RoutedCommand OpenCommand = new RoutedCommand( "Open", 
typeof(MainWindow)); 


) 
再 为 命令 编写 处 理 过 程 ,CS 代码 如 下 。 


using System.Diagnostics; 


public MainWindow() 
[ 
InitializeComponent(); 
CommandBindings. Add(new 
CommandBinding(BlockedCommand, delegate( object sender 
ExecutedRoutedEventArgs e) 


( 
MessageBox. Show( (string)e.Parameter, "Blocked"); 


D 
CommandBindings. Add(new CommandBinding(OpenCommand, 
delegate(object sender, ExecutedRoutedEventArgs e) 


t 


Process. Start( "notepad. exe", (string)e.Parameter); 
D 
} 


在 对 文件 操作 时 , 某 些 文件 用 OpenCommand 打开 ,而 某 些 文件 用 BlockedCommand 锁 
定 , 所 以 使 用 IValueConverter 把 文件 名 转换 为 ICommand。 编 写 文件 转换 成 命令 的 转换 
器 ,检查 文件 扩展 名 功能 ,后 台 CS 代码 如 下 。 


using System. Windows. Data; 
using System. Globalization; 
using System. IO; 


public class FileToCommandConverter : IValueConverter 


{ 
public object Convert (object value, Type targetType, object parameter, CultureInfo 


culture) 

t 
string extxt - ((FileInfo)value).Extension. ToLowerInvariant(); 
if (extxt ==". txt") 
ji 


return MainWindow. OpenCommand; 


) 
return MainWindow. BlockedCommand; 


public object ConvertBack (object value, Type targetType, object parameter, 
CultureInfo culture) 
t 


return value; 
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下 面 在 文件 数据 模板 中 放置 按钮 。 在 命令 参数 (文件 名 ) 中 使 用 数据 绑 定 ,XAML 代码 
如 下 。 


< DataTemplate > 
< WrapPanel > 
< TextBlock Text = "(Binding Path = Name}"/> 
< Button CommandParameter = "(Binding Path = FullName}"> 
< Button. Command > 
< Binding» 
< Binding. Converter > 
< local:FileToCommandConverter /> 
</Binding. Converter > 
</Binding> 
</Button. Command > 
Display 
</Button> 
</WrapPanel > 
</DataTemplate > 


运行 上 述 程序 ,页 面 显示 效果 如 图 9.10 所 示 。 只 有 . txt 文件 可 以 显示 其 内 容 。 命 令 允 
许 在 UI 和 行为 之 间 实 现 松 散 耦 合 ,这 就 让 应 用 程序 行为 的 定义 过 程 也 基于 数据 驱动 的 方 
式 。 有 一 些 并 非 应 用 程序 逻辑 的 行为 , 它 是 用 来 控制 显示 状态 的 。 例 如 , 当 用 户 在 按钮 上 移 
动 鼠 标 指针 时 ,按钮 高 亮 显 示 。 这 样 的 显示 逻辑 可 以 通过 命令 或 事件 实现 。 当 这 个 行为 用 
代码 来 实现 时 ,此 时 显示 和 行为 之 间 又 回 到 了 紧 耦 合 。 下 面 通 过 和 触发 器 来 解决 这 个 问题 。 


lele] x J] 
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|I am a command demo! Thanks for your click 3 
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图 9.10 数据 绑 定 命令 


9.3 fib 发 器 


在 第 8 章 中 ,触发 器 可 以 声明 式 地 将 动画 的 启动 和 控件 模板 关联 到 一 起 。 触 发 器 有 
Trigger, DataTrigger 和 EventTrigger 3 种 类 型 。 其 中 , Trigger 是 属性 触发 器 , 它 是 当 
DependencyProperty 的 值 发 生 改 变 时 触发 ; DataTrigger 是 数据 触发 器 ,是 当 普 通 . NET 属 
性 的 值 发 生 改变 时 触发 ; EventTrigger 是 事件 触发 器 , 当 路 由 事件 被 触发 时 调用 。 另 外 ,还 
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有 MultiTriggers 和 MultiDataTriggers 两 种 集合 触发 器 类 型 。 
9.3.1 数据 触发 器 


数据 触发 器 (DataTrigger) 只 能 被 用 在 数据 模板 中 , 它 以 声明 的 方式 设 定数 据 模 型 值 的 
动作 。 这 样 看 来 ,DataTrigger 就 是 一 个 在 标记 中 的 简单 值 转换 器 , 它 使 用 数据 绑 定 方式 从 
数据 模型 中 取 值 ,并 在 值 匹配 时 ,可 调用 Setter 和 EventSetter。 

继续 使 用 上 节 命 令 与 数据 绑 定案 例 , 使 用 DataTrigger 替换 值 转换 器 ,把 Command 属 
性 设置 成 BlockedCommand. XAML 代码 如 下 。 


< DataTemplate > 
< WrapPanel > 
< TextBlock Text = "(Binding Path Name}"/> 
< Button x:Name = " displayButton" Content = "Display" 
Command = "(x:Static local:DataTriggersDemo. BlockedCommand)" 
CommandParameter = "(Binding Path = FullName]"/» 
«/WrapPanel » 
«/DataTemplate > 


在 文件 扩展 名 为 ". txt" 时 ,设置 数据 触发 器 ,新 增 XAML 代码 如 下 。 


< DataTemplate > 
<WrapPanel > 


</WrapPanel > 
< DataTenplate. Triggers > 
< DataTrigger Binding = "(Binding Path = Extension)" Value = " .txt"/> 
</DataTemplate.Triggers> 
«/DataTemplate > 


当 扩展 名 为 “. txt” 时 ,就 把 Command 属性 设置 为 OpenCommand。 此 时 ,需要 添加 一 
个 Setter( 设 置 器 ) 到 DataTrigger。 为 设置 器 赋值 的 XAML 代码 如 下 。 


<DataTemplate > 
< WrapPanel > 


</WrapPanel > 
< DataTemplate. Triggers > 
< DataTrigger Binding = "(Binding Path = Extension}" Value = " .txt"> 
< Setter TargetName = " displayButton" Property = "Command" 
Value = "(x:Static local:DataTriggersDemo. OpenCommand] " /> 
«/DataTrigger > 
«/DataTenplate. Triggers > 
«/DataTemplate > 


因为 DataTrigger 支持 一 组 Setter 对 象 ,所 以 可 以 执行 多 个 动作 来 响应 数据 值 。 在 此 ， 
添加 第 二 个 设置 器 来 显示 可 执行 的 命令 。 完 整 的 XAML 代码 如 下 。 
< DataTemplate > 


< WrapPanel > 
< TextBlock Text = "(Binding Path = Name}"/> 
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< Button x:Name -" displayButton" Content = "Block" 
Command = "(x:Static local:DataTriggersDemo. BlockedCommand)" 
CommandParameter = "(Binding Path = FullName]"/» 
«/WrapPanel- 
< DataTemplate. Triggers > 
< DataTrigger Binding = "(Binding Path = Extension)" Value = ".txt"» 
< Setter TargetName = "_displayButton" Property = "Command" 
Value = "(x:Static local:DataTriggersDemo. OpenCommand] " /> 
< Setter TargetName = " displayButton" Property = "Content" 
Value = "Open" /> 
«/DataTrigger > 
«/DataTemplate. Triggers > 
</DataTemplate > 


运行 上 述 代 码 , 页 面 显 示 效 果 如 图 9. 11 所 示 。 
使 用 Setter 设置 了 两 组 属性 , 当 文 件 名 后 缀 是 “. txt” 
时 ,按钮 的 Content 为 Open; 否则 ,按钮 的 Content 为 
Block 。 

使 用 DataTrigger 时 ,属性 设置 数据 的 值 与 所 设 
定 的 值 类 型 完全 匹配 。 由 上 节 案 例 可 知 , 值 转换 器 调 ”图 9.11 DataTrigger 设置 多 个 属性 
用 ToLowerInvariant 来 处 理 不 同 的 文件 名 。 为 了 处 
理 不 同 的 文件 名 ,创建 一 个 简单 的 值 转换 器 ,后 台 CS 代码 如 下 。 













T) MainWindow 





Lam a TextBox 
bootmgr Block 
console.og[51,ci.] 
demo.bd o; pen| 





















using System. Windows. Data; 
using System. Globalization; 


public class ToLowerInvariantConverter:IValueConverter 
{ 
public object Convert (object value, Type targetType, object parameter, CultureInfo 


culture) 
f 
return ((string)value).ToLowerInvariant(); 
) 
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo 
culture) 
{ 


return value; 


) 
然后 再 把 这 个 转制 器 附加 到 触发 器 上 ,XAML 代码 如 下 。 


< DataTemplate. Triggers > 
< DataTrigger Value = ".txt"» 
< DataTrigger.Binding» 
« Binding Path = "Extension"> 
<Binding. Converter > 
< local:ToLowerInvariantConverter /> 
«/Binding. Converter > 
«/Binding» 
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</DataTrigger. Binding> 
< Setter TargetName -" displayButton" Property = "Command" 
Value = "(x:Static local:DataTriggersDemo. OpenCommand] " /> 
< Setter TargetName = " displayButton" Property = "Content" 
Value = "Open" /> 
«/DataTrigger > 
«/DataTenplate. Triggers > 


使 用 DataTrigger, 把 所 有 UI 独立 的 逻辑 (命令 绑 定 ) 移 动 到 标记 中 ,并 简化 转换 器 。 
这 种 方法 将 主要 的 逻辑 放置 在 标记 中 ,显示 界面 具有 了 创建 工具 的 能 力 , 让 UI 和 应 用 程序 
逻辑 分 离 。 


9.3.2 属性 触发 器 


属性 触发 器 (Trigger) 能 被 用 于 Style, ControlTemplate, DataTemplate, t3 J& ik . Hc 
适用 于 控件 模板 或 样式 。 

下 面 在 Style 中 使 用 Trigger, 用 DockPanel 布局 ,内 部 放置 一 个 TextBox。 当 TextBox 
的 Text 属性 值 发 生 改 变 时 ,引发 触发 器 。XAML 代码 如 下 。 


< DockPanel > 
< TextBox TextWrapping = "Wrap" Margin = "5" DockPanel. Dock = "Top"> 
< TextBox. Style > 
< Style TargetType = "TextBox"> 
< Style. Triggers > 
< Trigger Property = "Text" Value = "hello, everyone! "> 
< Setter Property = "Background" Value = "Pink" /> 
</Trigger > 
</Style. Triggers > 
</Style> 
«/TextBox. Style > 
</TextBox > 
</DockPanel > 


运行 上 述 代 码 ,在 TextBox # A “hello, everyone!" , È ff] Background( 背 景 ) 变 为 粉红 
& ,如 图 9.12 所 示 。 

下 面 在 TextBox 控件 下 加 入 CheckBox 控件 ,实现 当 鼠 标 指针 滑 过 CheckBox 时 ,其 前 
景色 变 为 红色 ,XAML 代码 如 下 。 


< CheckBox Content = "Style Trigger MouseOver Red"> 
< CheckBox. Resources > 
< Style TargetType = "(x:Type CheckBox] "> 
< Setter Property = "Foreground" Value = "SkyBlue" /> 
< Style. Triggers > 
< Trigger Property = "IsMouseOver" Value = "True"> 
< Setter Property = "Foreground" Value = "Red" /> 
</Trigger> 
</Style. Triggers > 
</Style> 
</CheckBox. Resources > 
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</CheckBox > 


运行 上 述 代 码 , 页 面 显示 效果 如 图 9. 13 所 示 。 当 鼠标 指针 滑 过 时 ,字体 变 成 红色 
Trigger。 











[ Style Trigger MouseOver Red 


图 9.12 属性 触发 器 图 9. 13 鼠标 滑 过 前 景色 变 红 











9.3.3 多 条 件 触发 器 


截至 目前 ,数据 触发 器 和 属性 触发 器 都 是 针对 单个 条 件 ,也 就 是 说 当 某 一 个 条 件 满足 时 
就 会 触发 。 而 现实 中 ,人 们 可 能 需要 满足 很 多 个 条 件 时 才 触 发 一 系列 操作 ,这 时 就 需要 用 到 
MultiTrigger 或 MultiDataTrigger。 它 们 都 具有 一 个 Conditions 集合 用 来 存放 一 些 触发 条 
件 ,这 里 的 Condition 之 间 是 And 关系 , 当 所 有 条 件 都 满足 时 ,Setter 集合 才 会 被 调用 。 根 
据 名 称 可 知 : MultiTrigger 用 于 实现 多 个 属性 (这 里 的 属性 指 依赖 属性 ) 同 时 满足 条 件 时 调 
用 ; MultiDataTrigger 用 于 实现 多 个 数据 触发 器 (这 里 的 属性 指 . NET 属性 ) 同 时 满足 条 件 
时 调用 。 

下 面 使 用 MultiTrigger 可 以 实现 多 条 件 触发 ,XAML 代码 如 下 。 


<Window. Resources> 
<Style TargetType = "CheckBox" > 
<Style. Triggers> 
<MultiTrigger > 
<! -- 条 件 列表 -> 
< MultiTrigger. Conditions > 
< Condition Property = "IsChecked" 
Value = "true" /> 
< Condition Property = "Content" 
Value = "浪花 淘 尽 英雄 " /> 
</MultiTrigger. Conditions > 
< MultiTrigger. Setters > 
< Setter Property = "FontSize" Value = "35" /> 
< Setter Property = "Foreground" Value = "Red" /> 
</MultiTrigger. Setters > 
</MultiTrigger > 
</Style. Triggers > 
</Style> 
</Window. Resources > 
< StackPanel > 
< CheckBox Content = "iR ift K TL JR DK" Margin = "5”/> 
< CheckBox Content = "浪花 淘 尽 英雄 " Margin = "5,0" /> 
< CheckBox Content = "青山 依旧 在 " Margin = "5" /> 
< CheckBox Content = " 几 度 夕阳 红 "” Margin- "5,0" Width= "496" /> 
«/StackPanel > 
</Window > 
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运行 上 述 代码 ,页 面 显 示 效 果 如 图 9. 14 所 示 。 巾 代码 ve Me 
中 的 条 件 列表 可 知 ,当选 中 CheckBox 的 IsChecked 属性 为 eprore 
真 , 且 Content 的 值 为 “浪花 淘 尽 英雄 ”时 ,MultiTrigger fik AP32--M- ] 
发 ,此 时 ,符合 条 件 的 CheckBox 的 FontSize 属性 值 35; È “浪花 淘 尽 英 雄 
的 Foreground 是 Red, 国 几 度 夕阳 红 

由 于 MultiDataTrigger 是 用 于 实现 多 个 . NET MHR = 
时 满足 条 件 时 才 调 用 。 接 下 来 , 先 创 建 User 类 ,包含 姓名 图 9.14 MultiTrigger 
和 年 龄 两 个 属性 ,CS 代码 如 下 。 























public class User 
í 
string name; 
public string Name 
( 
get ( return this.name; } 
set ( this. name = value; } 
) 
int age; 
public int Age 
í 
get ( return this. age; } 
set { this. age = value; } 
) 
public User() ( ) 
public User(string name, int age) 
i 
this. name = name; 
this. age = age; 


) 


在 < Window. Resources » X/ Window. Resources > 中 ,构造 MultiDataTrigger 的 条 件 ， 
XAML 代码 如 下 。 


xmlns:local- "clr- namespace:MultDataTriggerDemo" 
Title = "MainWindow" Height = "350" Width = "525" Loaded = "Window Loaded" 
< Window. Resources > 
< Style TargetType = "Button" 
< Style. Triggers > 
< MultiDataTrigger > 
<! -- AKIEPER --> 
< MultiDataTrigger. Conditions > 
< Condition Binding = "(Binding Path = Name}" Value = "梦想 成 真 "/> 
< Condition Binding = "(Binding Path = Age]" Value = "89" /> 
</MultiDataTrigger. Conditions > 
< Setter Property = "FontSize" Value = "18" /> 
< Setter Property = "Foreground" Value = "Red" /> 
</MultiDataTrigger > 
</Style. Triggers > 
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</Style> 
</Window. Resources > 


用 Grid 布局 前 台 页 面 ,Grid 共 3 行 2 列 , 第 0 行 第 0 列 放置 一 个 TextBlock; 第 0 £758 
1 列 放置 一 个 TextBox; 第 1 行 第 0 列 放 置 一 个 TextBlock. $8 1 行 第 1 列 放置 一 个 
TextBox; 第 2 行 放置 一 个 Button 让 其 占据 2 列 。XAML 代码 如 下 。 


< Grid x:Name = "gridl" 
< Grid. RowDef initions > 
< RowDef inition/» 
< RowDef inition/> 
< RowDef inition/> 
</Grid. RowDef initions > 
< Grid. ColumnDefinitions > 
< ColumnDefinition/> 
< ColumnDefinition/> 
</Grid. ColunnDefinitions > 
< TextBlock Height = "23" Text = "Name:" HorizontalAlignment = "Left" 
Margin = "12,12,0,0" VerticalAlignment = "Center" /> 
« TextBlock Height = "23" Grid. Row = "1" Grid. Column = "0" Margin = "12,12,0,0" 
HorizontalAlignment = "Left"Text = "Age: "VerticalAlignment = "Center" /> 
< TextBox Text = "(Binding Name]" HorizontalAlignment = "Center" Width = "120" 
Grid. Column = "1" Margin = "0,12,12,0" Name = "nameTextBox" VerticalAlignment = 
"Center" /> 
< TextBox Text = "(Binding Age]" Grid. Row = "1" Grid. Column = "1" 
HorizontalAlignment = "Center" Margin = "0, 12, 12,0" Width = "120" 
Name = "ageTextBox" VerticalAlignment = "Center" /> 
< Button Content = "(Binding Path = Name}" Name = "buttonl" Grid. Row = "2" 
Grid. ColumnSpan = "2" Margin = "12"/> 
</Grid> 


在 后 台 定 义 一 个 User 类 的 实例 ,并 指定 数据 上 下 文 。CS 代码 如 下 。 


public partial class MainWindow : Window 


{ 
public MainWindow() 





{ 
InitializeComponent(); 
) 
private void Window Loaded(object sender, RoutedEventArgs e) 
{ 
User userl = new User(); 
gridl.DataContext - userl; 
) 





) 


运行 完整 的 代码 ,在 Name 5 Age 所 绑 定 的 
TextBox 控件 中 分 别 输入 “梦想 成 真 ”" 和 “89”, 再 单 击 
Button 后 ,页 面 显示 效果 如 图 9. 15 所 示 。 

在 本 节 中 ,各 种 触发 器 都 设置 在 Style 内 部 。 故 从 
某 种 意义 上 讲 , 触 发 器 可 以 看 作 一 种 Style, 因 为 它 包 含 图 9.15 MultiDataTrigger 
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有 一 个 Setter 集合 ,并 根据 一 个 或 多 个 条 件 执行 Setter 中 的 属性 改变 。Styles 是 放置 触发 
器 的 最 好 位 置 。 但 对 于 每 个 FrameworkElement 来 说 ,都 有 Triggers 集合 ,也 可 以 放 在 
Triggers 集合 中 。 


9.4 小 结 


本 章 介 绍 了 动作 原则 命令 系统 及 触发 器 的 使 用 。 其 中 ,触发 器 适用 于 模板 或 样式 中 。 
Trigger 和 EventTrigger 能 被 用 于 控件 模板 或 样式 中 ,DataTrigger 只 能 被 用 于 数据 模 
板 中 。 


习题 与 实验 9 


1. 简 述 路 由 事件 与 命令 的 区 别 ,并 从 生活 中 寻找 相关 案例 。 

2. 设计 Windows 的 记事 本 ,实现 复制 .粘贴 . 剪 切 、 保 存 . 退 出 等 功能 。 

3. 根据 本 章 多 条 件 触发 器 的 相关 知识 ,分 别 实现 MultiTrigger 和 MultiDataTrigger 两 
个 案例 ,并 解释 为 什么 只 有 “浪花 淘 尽 英雄 ”样式 发 生变 化 。 





资源 


在 第 1 章 中 第 一 次 引入 资源 的 概念 ,由 其 案例 可 见 ,定义 资源 以 后 ,可 以 在 多 处 重复 利 
用 。 本 章 将 开始 深入 地 学 习 资 源 。 通 过 资源 的 概念 学 习 , 认 识 资源 的 常见 类 型 ,学 会 如 何 引 
用 资源 ,进一步 创建 及 使 用 资源 字典 。 并 简单 触及 用 ResourceDictionary 来 管理 多 个 
Resources 文件 (这 是 换 肤 的 基础 ) 。 


10.1 资源 概述 


WPF 的 资源 用 于 保存 可 以 被 重复 利用 的 样式 ,对象 定义 及 传统 的 资源 (如 二 进 制 数据 、 
图 片 等 ) 。 使 用 WPF 的 资源 在 应 用 程序 中 实现 外 形 的 更 换 比 以 往 更 简单 。 


10.1.1 资源 的 定义 


资源 是 保存 在 可 执行 文件 中 的 一 种 不 可 执行 数据 。 在 WPF 的 资源 中 ,几乎 可 以 包含 
Va f .字符 串 等 所 有 的 任意 CLR 对 象 ,只 要 对 象 有 一 个 默认 的 构造 函数 和 独立 的 属性 。 也 
就 是 说 ,应 用 程序 中 非 程序 代码 的 内 容 , 如 点 阵 图 、 颜 色 、 字 型 .动画 .影片 文档 及 字符 串 常量 
值 ,可 将 它们 从 程序 中 独立 出 来 ,单独 包装 成 “资源 (Resource)”。 

下 面 在 WPF 资源 中 ,定义 一 种 复 用 的 SolidColorBrush 对 象 ,再 让 按钮 和 文本 框 的 背 
景 及 矩形 的 填充 颜色 均 使 用 SolidColorBrush 对 象 。 


<! -- 保留 Window 代码 部 分 --> 
« Window. Resources > 
< SolidColorBrush x:Key = "goldBrush" Color = "Gold" /> 
«/Window. Resources > 
< StackPanel > 
«Button Margin = "5" Content = "Button with goldBrush" 
Background = "{StaticResource goldBrush}"/> 
«TextBlock Margin = "5" Text = "This is a TextBlock" 
Background = "(StaticResource goldBrush}" /> 
«Rectangle Margin - " 5" Width - " 500" Height - "25" Fill - " (StaticResource 
goldBrush]"/» 
«/StackPanel » 
</Window > 


运行 上 述 代码 ,页 面 显示 效果 如 图 10. 1 所 示 。 


184 

















WPF 编程 基础 
E MainWindow ud " [ETE] 
Button with goldBrush | 
This is a TextBlock 




















图 10.1 资源 定义 及 引用 


10.1.2 资源 可 用 范围 


WPF 具有 封装 和 存 取 资 源 机 制 ,开发 人 员 可 将 资源 建立 在 应 用 程序 的 不 同 范围 上 。 
WPF 中 ,资源 定义 的 位 置 决定 了 该 资源 的 可 用 范围 。 通 常 资源 可 以 定义 在 控件 、 窗 体 .应 用 
程序 和 资源 字典 中 。 对 资源 的 可 用 范围 ,详细 介绍 如 下 。 

CD 控件 (对 象 ) 级 : 资源 定义 在 某 个 ContentControl 中 ,作为 其 子 容器 、 子 控件 共享 的 
资源 。 

现在 定义 Button 上 的 资源 , TextBlock 是 Button 的 子 控件 ,调用 Button 资源 的 
XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 --> 
< StackPanel > 
« Button > 
« Button. Resources > 
< SolidColorBrush x:Key = "nyYellowBrush" Color "Yellow" /> 
«/Button. Resources > 
< Button. Content > 
<TextBlock Text = I am a Button. Content " 
Background = " (StaticResource myYellowBrush]" /> 
«/Button. Content » 
«/Button» 
«/StackPanel » 
</Window> 


运行 上 述 代码 ,页面 显示 效果 如 图 10. 2 所 示 , Button 的 
子 控件 TextBlock ,共享 了 Button. 上 定义 的 SolidColorBrush 
对 象 资源 。 
(2) 窗 体 级 : 资源 定义 在 Window 或 Page 层级 的 图 10.2 控件 级 资源 
XAML 文档 中 ,本 窗 体 或 页 面 的 所 有 的 控件 都 可 使 用 ,在 资 
源 定义 中 的 示例 , 则 属于 窗 体 级 。 
(3) 应 用 程序 级 : 资源 定义 在 App. xaml 中 ,资源 可 用 到 应 用 程序 内 的 任何 地 方 。 
下 面 在 App. xaml 中 定义 SolidColorBrush,XAML 代码 如 下 。 


a 





< Application x:Class = "ApplicationResource0. App" 
xmlns = "http: //schemas. microsoft. com/winfx/2006/xaml/presentation" 
xnlns:x- "http://schemas. microsoft. com/winfx/2006/xaml" 
StartupUri = "MainWindow. xaml"» 
< Application. Resources > 
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< SolidColorBrush x:Key = "myGoldBrush" Color = "Gold" /> 
«/Application. Resources > 
«/Application» 


在 MainWindow. xaml 中 引用 资源 ,XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 --> 
< StackPanel > 
< Button Margin = "5" Background = "{StaticResource myGoldBrush}"> I am a Button 
«/Button» 
«/StackPanel » 
«/ Window 


运行 完整 的 代码 ,页 面 显示 效果 如 图 10. 3 所 示 , 在 B Manini 
MainWindow. xaml 文档 中 ,Button 的 属性 Background 引用 
了 SolidColorBrush 资源 。 

(4) 字典 级 : 资源 封装 成 一 个 资源 字典 ,定义 到 一 个 ”图 10.3 应 用 程序 级 资源 
ResourceDictionary 的 XAML 文件 中 ,还 可 被 其 他 应 用 程序 
重复 使 用 ,将 在 10. 4 节 中 重点 介绍 。 

每 一 个 框架 级 元 素 (FrameworkElement 或 者 FrameworkContentElement) 都 有 一 个 资 
源 属性 。 每 一 个 在 资源 字典 中 的 资源 都 有 一 个 唯一 不 重复 的 键 值 (Key) ,在 标签 中 使 用 x: 
Key 属性 来 标识 它 。 一 般 来 说 , 键 值 是 一 个 字符 串 ,但 也 可 以 用 合适 的 扩展 标签 来 设置 为 其 
他 对 象 类 型 。 非 字符 键 值 资源 使 用 于 特定 的 WPF 区 域 ,尤其 是 风格 、 组 件 资源 及 样式 数 
据 等 。 

















10.2 资源 类 型 


在 WPF 中 的 资源 依赖 于 核心 . NET 的 资源 系统 ,并 在 这 个 基础 上 ,还 添加 了 二 进 制 资 
源 和 逮 辑 资源 两 种 资源 类 型 。 本 节 中 重点 介绍 WPF 的 二 进 制 资源 和 逻辑 资源 。 


10.2.1 二 进 制 资源 


二 进 制 资源 其 实 是 一 些 传统 的 资源 项 ,如 位 图 、 音 频 文 件 、 视 频 文 件 和 松散 文件 (Loose 
file) 等 。 对 于 这 些 资 源 项 可 将 其 存储 为 松散 文件 ,或 者 编译 到 程序 集中 。 这 与 传统 的 . NET 
程序 其 实 是 相同 的 ,但 在 WPF 中 提供 了 Resource 和 Content 两 种 对 二 进 制 资源 的 构建 选 
项 。 其 中 ,Resource 是 将 资源 放 入 程序 集中 (如 果 是 有 本 地 化 支持 ,会 编译 到 对 应 语言 集 的 
子 程序 集中 )。Content 是 将 这 个 资源 作为 一 个 松散 文件 加 入 到 程序 集中 ,程序 集会 记录 对 
应 的 文件 是 否 存 在 及 其 路 径 。 这 就 相当 于 人 们 在 Web 开发 中 常用 的 构建 动作 。 访 问 二 进 
制 资源 最 普通 的 就 是 对 松散 文件 的 访问 ,实质 上 和 普通 的 . NET 应 用 程序 是 一 样 的 。 

下 面 介绍 在 WPF 程序 添加 二 进 制 资源 及 使 用 Pack URI 路 径 访 问 二 进 制 资源 的 方法 。 

1. 添加 二 进 制 资源 

添加 字符 串 资源 (不 是 文件 ) 需 要 使 用 应 用 程序 Properties 名 称 空间 下 的 资源 文件 
(Resources. resx) ,如 图 10. 4 所 示 。 

Resources. resx 文件 内 容 的 组 织 形式 是 “ 键 - 值 ” 对 ,编译 后 , Resources. resx 生成 
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Properties 名 称 空间 下 的 Resources 类 ,使 用 该 类 的 方法 或 属性 就 能 获得 资源 。XAML 编 
译 器 要 访问 这 个 类 , 需 将 默认 的 Resources. resx 访问 级 由 Internal 改 为 Public。 在 资源 文 
件 编译 器 中 ,添加 两 个 名 称 分 别 是 LoginName 和 PassWord 的 条 目 , 如 图 10.5 所 示 。 接 下 
来 ,在 XAML 代码 和 CS 代码 中 访问 它们 。 






























4 (jlBinaryResource 名 称 ~ (B 注释 
4 ly Properties T - 
Mobi [ogiName ^ |loginname 
PassWord | password 
7— E Settings.setings . 
图 10.4 添加 二 进 制 资源 10.5 设置 Resources. resx 访问 级 别 为 Public 


TE XAML 代码 中 使 用 Resources. resx 中 的 资源 ,要 将 程序 中 的 Properties 名 称 空间 映 
射 为 XAML 的 名 称 空间 ,再 使 用 x: Static 标签 扩展 来 访问 资源 。XAML 代码 如 下 。 


< Window x:Class = "BinaryResource. MainWindow" 
xmlns = "http: //schenas. microsoft. con/winfx/2006/xaml/presentation" 
xmlns:x = "http: //schemas. microsoft. com/winfx/2006/xaml" 
xmlns:prop = "clr - namespace:BinaryResource. Properties" 
Title = "MainWindow" Height = "350" Width = "525"» 
«Grid» 
< Grid. RowDef initions > 
< RowDefinition Height = "20" /> 
< RowDef inition Height = "4" /> 
< RowDef inition Height = "23" /> 
«/Grid. RowDef initions > 
< Grid. ColumnDef initions > 
< ColunnDefinition Width = "Auto" /> 
< ColunnDefinition Width = "4" /> 
«ColumnDefinition Width- " « " /> 
«/Grid. ColumnDefinitions > 
< TextBlock x:Name = "loginNameTextBlock" 
Text = "(x:Static prop:Resources. LoginName }"></TextBlock > 
< TextBlock x:Name = "passWordTextBlock" 
Text = "(x:Static prop:Resources. PassWord }" Grid. Row = "2"></TextBlock > 
< TextBox BorderBrush = "Black" Grid. Column = "2"></TextBox > 
< TextBox BorderBrush = "Black" Grid. Row = "2" Grid. Column = "2"></TextBox > 
</Grid> 
</Window> 


运行 上 述 代码 ,页面 显示 效果 如 图 10. 6 所 示 ,在 页 面 上 显示 的 是 图 10. 5 中 名 称 所 对 应 
的 值 。 使 用 Resources. resx 最 大 的 优势 就 是 便于 程序 的 国际 化 .本 地 化 。 如 果 要 将 图 10.6 
的 运行 效果 页 面 改 成 中 文 版 ,只 需要 将 图 10. 5 中 的 资源 值 LoginName 和 PassWord 改 成 
“登录 ”和 “密码 ”, 代 码 不 做 任何 修改 ,再 次 运行 代码 .页面 显示 效果 如 图 10.7 所 示 。 

如 果 添 加 的 资源 不 是 字符 串 ,而 是 图 片 .音频 或 视频 等 , 则 使 用 外 部 文件 作为 资源 ,直接 
加 入 到 项 目 文件 中 的 资源 文件 夹 即 可 。 





E3 MainWindow enue 











lloginname 
password 


10.6 运行 效果 图 10.7 使 用 Resources. resx 的 优势 








2. 使 用 Pack URI 路 径 访问 二 进 制 资源 

在 WPF 中 ,二 进 制 资源 添加 到 程序 后 ,使 用 Pack URI 路径 访问 二 进 制 资源 。 下 面 分 
别 从 路 径 格式 定义 \ 在 XAML 代码 和 CS 代码 中 使 用 URI 路 径 的 方法 详解 。 

1) 路 径 格式 定义 

完整 的 URI 定 义 如 下 。 


pack://application, , ,[/ 可 选 程序 集 名 称 ; ][ 可 选 版 本 号 ; ][ 文 件 夹 名 称 /] 文 件 名 称 
缩 略 后 的 写法 如 下 。 
[文件 夹 名 称 /] 文 件 名 称 


2) f£ XAML 代码 中 使 用 URI 路 径 
完整 路 径 法 如 下 。 


< Image x:Name = "ImageBackground" 
Source = "pack: //application:,,, /Resources/Images/Car. png" Stretch = "Fill" /> 


相对 路 径 法 如 下 。 
< Image x:Name = "ImageBackground" Source = "Resources/Images/Car. png" Stretch = "Fill" /> 


下 面 在 WPF 的 项 目 中 创建 Resources 文件 夹 ,在 该 文件 夹 下 再 创建 Images 文件 夹 ,并 
复制 图 像 文件 到 Images 文件 夹 下 ,如 图 10. 8 所 示 。 使 用 URI 相对 路 径 的 XAML 代码 
如 下 。 


<! -一 保留 Window 代码 部 分 --> 
< StackPanel > 
< Image x:Name = "ImageBackground" Stretch = "Fill" 
Source = "Resources/Images/Doraemon. png" /> 
</StackPanel > 
</Window> 


运行 上 述 代码 ,页 面 显示 效果 如 图 10. 9 所 示 。 





4 (Jl PackURIAccessBinaryResource 
b 国 Properties 
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4 By Resources 
4 加 Images 
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» [À Appxaml 
> 国 MainWindowxaml 




















图 10.8 使 用 外 部 文件 做 资源 图 10.9 使 用 外 部 文件 做 资源 
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3) 在 后 台 CS 代码 中 使 用 URI 路径 
绝对 路 径 法 如 下 。 


Uri imageUri = new Uri(@"pack://application:,,, /Resources/Images/Car. png", 
UriKind. Absolute); 
this. ImageBg. Source = new BitmapImage( imageUri); 


相对 路 径 法 如 下 。 


Uri imageUri = new Uri( @"Resources/Images/Car. png ", UriKind. Relative); 
this. ImageBg. Source = new BitmapImage( imageUri); 


10.2.2 逻辑 资源 


逻辑 资源 是 WPF 特有 的 资源 类 型 , 它 是 存储 在 元 素 的 Resources 属性 中 的 . NET 对 
象 ,通常 需要 共享 给 多 个 子 元 素 。 在 此 ,声明 SolidColorBrush 和 LinearGradientBrush 两 个 
对 象 , 作 为 两 个 逻辑 资源 ,通过 静态 引用 方式 来 引用 这 两 个 逻辑 资源 。XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 --> 
« Window. Resources > 
< SolidColorBrush x:Key = "buttonBrush"» Pink «/SolidColorBrush-» 
< LinearGradientBrush x:Key = "backgroundBrush" StartPoint = "0,0" EndPoint = "1,1" 
< GradientStop Color = "Red" Offset = "0" /> 
< GradientStop Color = "Yellow" Offset = "0.6" /> 
< GradientStop Color = "Green" Offset = "1" /> 
«/LinearGradientBrush > 
«/Window. Resources > 
< Window. Background > 
< StaticResource ResourceKey = "backgroundBrush" /> 
</Window. Background > 
< StackPanel > 
< Button Margin = "5" Content = "Static Resource Button A" Background = " (StaticResource 
buttonBrush}" /> 
< Button Margin = "5" Content = "Static Resource Button B" Background = " (StaticResource 
buttonBrush)"/» 
«/StackPanel > 4 MainWindow aE 


«/ Window 


运行 上 述 代码 ,页 面 显示 效果 如 图 10. 10 所 示 。 代 码 中 
SolidColorBrush 和 LinearGradientBrush 通过 关键 字 
“x:Key” 为 资源 命名 ,然后 在 Button 与 Windows 的 Background 
属性 中 通过 资源 名 静态 引用 资源 。 图 10.10 ”逻辑 资源 


10.3 资源 引用 方式 


在 10.1 节 和 10.2 节 中 ,看 到 的 案例 的 共性 是 : 首先 需要 定义 资源 ,才能 引用 资源 。 资 
源 的 引用 有 静态 资源 引用 和 动态 资源 引用 两 种 方式 。 
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10.3.1 静态 资源 引用 


静态 资源 使 用 StaticResource 关键 字 , 只 从 资源 集合 中 获取 对 象 一 次 。 静 态 资 源 引 用 
方式 不 支持 向 前 加 载 ,故此 ,静态 资源 引用 要 求 所 有 的 资源 应 该 先 定义 后 引用 。 
StaticResource 通常 用 在 以 下 情形 中 。 

CD 设计 的 APP 是 将 所 有 的 资源 放 入 Page 或 App 这 个 级 别 的 ResourceDictionary 中 
的 ,而 且 不 需要 在 运行 时 重新 加 载 。 只 保存 一 些 松 散文 件 、. 逻辑 资源 的 声明 等 。 

(2) 不 需要 给 DependencyObject 或 Freezable 的 对 象 设 置 属性 。 

(3) Resource Dictionary 将 被 编译 进 DLL. 

(4) 需要 给 很 多 的 Dependency Property 赋值 。 

StaticResource 的 查找 行为 步骤 如 下 。 

CD 检查 此 对 象 本 身 的 Resources 集合 内 是 否 有 匹配 值 (根据 ResourceKey) 。 

(2) 在 逻辑 树 中 向 上 搜寻 父 元 素 的 ResourceDictionary 。 

(3) 检查 Root 级 别 , 如 Page, Window, Application 等 。 


10.3.2 动态 资源 引用 


动态 资源 是 在 运行 时 决定 , 当 运 行 过 程 中 真正 需要 时 , 才 到 资源 目标 中 查找 其 值 。 因 
此 ,可 以 动态 地 修改 它 。 由 于 动态 资源 在 运行 时 才 确 定 其 值 ,因此 效率 比 静态 资源 要 低 。 需 
要 说 明 的 是 ,资源 不 仅 可 以 在 XAML 代码 中 访问 ,也 可 以 使 用 CS 代码 访问 和 控制 它们 。 
方法 是 使 用 FindResource 查找 资源 、Resource. Add 增加 资源 和 Resource. Remove 移 除 

静态 资源 和 动态 资源 的 区 别 在 于 静态 资源 只 从 资源 集合 中 获取 对 象 一 次 ,然而 动态 资 
源 在 每 次 需要 对 象 时 都 会 重新 从 资源 集合 中 查找 对 象 。 这 意味 着 可 以 在 同一 键 下 放置 一 个 
全 新 对 象 ,并 且 动 态 资源 会 应 用 该 变化 。 


<! -- 保留 Window 代码 部 分 --> 
« Window. Resources > 
< LinearGradientBrush x:Key = "backgroundBrush" StartPoint = "0,0" EndPoint = "1,1"> 
< GradientStop Color = "Red" Offset = "0" /> 
< GradientStop Color = "Yellow" Offset = "0.6" /> 
< GradientStop Color = "Green" Offset = "1" /> 
«/LinearGradientBrush» 
< InageBrush x:Key = "TileBrush" TileMode = "Tile" 
ViewportUnits = "Absolute" Viewport - "0 0 32 32" 
ImageSource = "/Resources/Images/Snowman. png" Opacity = "0.9"/» 
«/Window. Resources > 
« Window. Background 
< StaticResource ResourceKey = "backgroundBrush" /> 
«/Window. Background > 
«Grid» 
< StackPanel Margin = "5"> 
< Button Background = " {DynamicResource TileBrush]" Padding = "5" 
FontWeight = "Bold" FontSize = "14" Margin = "5" Content = "DynamicResource" /> 
< Button Padding = "5" Margin = "5" Content = "ChangeBrush" FontSize = "14" 
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FontWeight = "Bold" Click = "ChangeButton_Click"/> 
< Button Background = "(StaticResource TileBrush}" Padding = "5" Margin- "5" 
FontWeight = "Bold" FontSize = "14" Content = "StaticResource" /» 
«/StackPanel > 
«/Grid» 
«/ Window 


ChangeButton Click 事件 用 来 改变 动态 资源 ,其 CS 代码 如 下 。 


private void ChangeButton Click(object sender, RoutedEventArgs e) 
{ 

this. Resources[ " TileBrush" ] = new SolidColorBrush(Colors. LightPink); 
} 


运行 上 述 代码 ,页 面 显 示 效 果 如 图 10. 11 所 示 。 在 图 10. 11 中 的 第 一 个 Button 是 动态 
引用 资源 , 单 击 图 中 的 ChangeBrush 按钮 后 ,页 面 显 示 效 果 如 图 10. 12 所 示 ,DynamicResource 
按钮 背景 色 由 图 像 笔 刷 变 成 “ 亮 粉 (LightPink)” 色 。 











图 10.11 资源 引用 方式 图 10.12 动态 资源 运行 中 被 改变 


由 程序 执行 的 结果 可 知 , 静 态 资源 引用 是 从 控件 所 在 的 容器 开始 依次 向 上 查找 的 ,而 动 
态 资源 引用 是 从 控件 开始 向 上 查找 的 ( 即 控件 的 资源 覆盖 其 父 容器 的 同名 资源 )。 更 改 资 源 
时 ,动态 资源 引用 的 控件 样式 发 生变 化 ( 即 “DynamicResource” 发 生变 化 )。 


10.4 资源 字典 


资源 字典 可 以 实现 多 个 项 目 之 间 的 资源 共享 ,资源 字典 是 一 个 XAML 文档 ,该 文档 存 
储 了 所 希望 使 用 的 资源 。 

资源 字典 要 先 创建 ,然后 才能 使 用 。 在 使 用 资源 字典 时 ,又 分 为 集成 资源 和 使 用 资源 两 
个 步骤 。 


10.4.1 创建 资源 字典 


创建 资源 字典 就 是 把 需要 使 用 的 资源 包含 在 一 个 xaml 文件 中 。 在 ResourceDictionary 中 
唯一 的 关键 字 “x:Key”? 为 资源 命名 。 

下 面 建立 一 个 资源 字典 ,将 其 命名 为 “DictionaryBackground. xaml". F Ht vp 8j Æ 
LinearGradientBrush 对 象 .并 命名 为 backgroundBrush。XAML 代码 如 下 。 





< ResourceDictionary xmlns = "http://schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x = "http: //schemas. microsoft. com/winfx/2006/xaml"» 
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< LinearGradientBrush x:Key = "backgroundBrush" StartPoint = "0,0" EndPoint = "1,1"» 
< GradientStop Color = "Red" Offset = "0" /> 
« GradientStop Color - "Yellow" Offset - "0.6" /» 
< GradientStop Color = "Green" Offset = "1" /> 
«/LinearGradientBrush» 
«/ResourceDictionary 


青 创建 “DictionaryString. xaml” 资 源 字 典 。 字 典 中 创建 3 个 字符 串 对 象 ,分 别 命名 为 
"strl""str2"fül"str3", XAML 代码 如 下 。 


< ResourceDictionary xmlns = " http://schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x= "http://schemas. microsoft. com/winfx/2006/xaml" 
xmlns:sys = "clr - namespace:System;assembly = mscorlib"> 
< sys:String x:Key= "strl" > 2016/7/10 </sys:String> 
< sys:String x:Key= "str2" > 12:38 </sys:String> 
< sys String x:Key = "str3" > 28'C ?</sys:String> 
</ResourceDictionary> 


10.4.2 使 用 资源 字典 


使 用 资源 字典 分 为 集成 资源 和 使 用 资源 两 个 步 又。 集成 资源 是 将 资源 字典 集成 到 应 用 
程序 的 某 些 资源 集合 中 ; 使 用 资源 是 在 集成 资源 之 后 ,在 当前 的 工程 中 使 用 这 些 资源 。 
1， 集 成 资源 


使 用 资源 字典 ,首先 要 将 资源 字典 集成 到 应 用 程序 的 某 些 资源 集合 中 。 一 般 的 做 法 是 


集成 到 App. xaml 文件 中 。 对 上 一 节 创 建 的 两 个 资源 字典 集成 到 App. xaml 中 ,其 XAML 
代码 如 下 。 


< Application x:Class = "ResourceDictionary. App" 
xmlns = "http://schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x = "http: //schemas. microsoft. com/winfx/2006/xaml" 
xmlns:sys = "clr- namespace: System; assembly = mscorlib" 
StartupUri = "MainWindow. xaml"» 
« Application. Resources > 
< ResourceDictionary ^ 
< ResourceDictionary.MergedDictionaries > 
< ResourceDictionary Source = "DictionaryString. xaml"/» 
< ResourceDictionary Source = "DictionaryBackground. xaml" /> 
«/ResourceDictionary.MergedDictionaries > 
«/ResourceDictionary 
«/Application. Resources > 
«/Application» 


上 述 代码 中 的 ResourceDictionary. MergedDictionaries 
属性 是 一 个 ResourceDictionary 对 象 的 集合 .可 以 使 用 这 个 集合 > a3 
提供 用 户 需 要 使 用 的 资源 。 也 就 是 说 ,如 果 需 要 某 个 资源 ,只 ^ [e Appxaml 


4 (F ResourceDictionary 
b Bd Properties 


需要 将 与 该 资源 相关 的 xaml c PESCE A- Penh HIT, oem 
在 创建 资源 字典 的 ResourceDictionary 项 目 文件 中 , 包 Me 


含 的 文档 如 图 10. 13 所 示 。 图 10.13 ”资源 字典 项 目 文件 夹 
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2. 使 用 资源 
将 资源 字典 集成 到 App. xaml 之 后 ,就 可 以 使 用 这 些 资源 了 。 在 MainWindow. xaml 
中 设计 用 户 的 XAML 代码 如 下 。 


< Window x:Class = "ResourceDictionary. MainWindow" 
xmlns = "http://schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x= "http://schemas. microsoft. com/winfx/2006/xaml" 
xmlns:sys = "clr- namespace:System;assembly = mscorlib" 
Title = "MainWindow" Height = "350" Width = "525"» 
< Window. Background > 
< StaticResource ResourceKey = "backgroundBrush" /> 
«/Window. Background 
«Grid» 
« Grid. RowDef initions > 
< RowDef inition Height = "104 * "»«/RowDefinition» 
< RowDef inition Height = "3 * "»«/RowDefinition» 
< RowDefinition Height = "101 * " /> 
< RowDef inition Height = "104 * "»«/RowDefinition» 
«/Grid. RowDef initions > 
< Grid. ColumnDefinitions > 
< ColumnDefinition ></ColumnDefinition> 
< ColumnDefinition ></ColumnDefinition > 
< ColumnDefinition ></ColumnDefinition > 
«/Grid. ColumnDefinitions > 
< TextBlock Foreground = "White" Margin = " 26, 25, 23, 25" FontSize = "30" > Date: 
«/TextBlock» 
«TextBox Grid. Column = "1" Margin "8,25,6,25"FontSize = "30" Name = "dateTextBox" /> 
<TextBlock Foreground = "White" Margin = "26,25, 23,25" FontSize = "30" Grid. Row = "2" > 
Time:</TextBlock > 
<TextBox Grid. Row = "2" Grid.Column= "1" Margin = "8, 26,7,18" FontSize = "30" Name = 
"timeTextBox" /> 
<TextBlock Foreground = "White" Margin = "26,25,1,25" FontSize = "30" Grid.Row= "3" > 
Weather :</TextBlock > 
«TextBox Margin = "8,25,6,25" Grid. Row = "3" Grid. Column = "1" FontSize = "30" Name = 
"weatherTextBox" /> 
<Button Grid. Column = "2" Margin = "20,25" x:Name = "dateButton" FontSize = "30" Click 
= "dateButton_Click"> 日 期 </Button > 
«Button Grid. Column = "2" Margin = "20, 26, 20, 18" Grid. Row = "2" x:Name = "timeButton" 
FontSize = "30" Click = "timeButton_Click"> 时 间 </Button> 
«Button Grid. Column = "2" Margin = "20, 25" Grid. Row = "3" x:Name = "weatherButton" 
FontSize = "30" Click = "weatherButton_Click"> 天 气 </Button > 
</Grid> 
</Window > 


上 述 代码 中 的 < StaticResource ResourceKey 王 "backgroundBrush"/> 这 条 语句 ,实现 对 
资源 的 引用 。 

下 面 接着 在 后 台 编 写 dateButton .timeButton 和 weatherButton 3 个 按钮 事件 的 CS 
代码 。 


private void dateButton Click(object sender, RoutedEventArgs e) 








{ 
dateTextBox. Text = this. FindResource("stri").ToString(); 
} 
private void timeButton Click(object sender, RoutedEventArgs e) 
{ 
timeTextBox. Text = this. FindResource("str2").ToString(); 
} 
private void weatherButton Click(object sender, RoutedEventArgs e) 


{ 
weatherTextBox. Text = this. FindResource( "str3"). ToString(); 


运行 完整 的 代码 ,页面 显示 效果 如 图 10. 14 所 示 。 继 续 单 击 “ 日 期 “时间” 和 “天 气 ” 按 
钮 后 ,页 面 显示 效果 如 图 10. 15 所 示 。 




















Weather: E ， 天气 | 


图 10.15 正确 使 用 资源 字典 








10.5 小 结 


本 章 从 资源 的 定义 出 发 ,可 以 将 资源 定义 在 控件 、 窗 体 、 应 用 程序 和 资源 字典 中 。 在 
WPF 中 资源 类 型 有 二 进 制 资源 和 逻辑 资源 两 种 类 型 。 资 源 的 引用 方式 有 静态 资源 引用 和 
动态 资源 引用 两 种 方式 。 资 源 字 典 要 遵循 先 创建 后 使 用 的 规则 。 

将 资源 从 程序 中 独立 出 来 , 源 程序 更 高 效 ,便于 管理 ,便于 更 新 ,维护 性 好 ,软件 的 自 适 
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应 能 力 强 。 资 源 一 旦 定义 , 便 可 重复 利用 。 在 WPF 中 ,将 资源 保存 在 XAML 中 ,对 设计 者 
而 言 是 “可 见 的 ”。 


习题 与 实验 10 


1. 练习 定义 复 用 的 SolidColorBrush 对 象 ,再 实现 让 登录 页 面 的 按钮 和 文本 框 的 背景 
颜色 均 使 用 此 SolidColorBrush 对 象 的 实例 ,如 图 10. 16 所 示 。 熟 练 掌握 资源 可 用 范围 的 
4 个 级 别 。 

2. 利用 资源 字典 实现 如 图 10. 17 所 示 的 页 面 。 在 页 面 上 , 单 击 “ 日 期 * 时 间 ” 和 “天 气 ” 
3 个 按钮 后 ,页 面 的 3 个 对 应 的 文本 框 中 出 现 相 应 的 数值 。 








10.16 定义 复 用 的 SolidColorBrush 图 10.17 调用 资源 字典 页 面 





样式 


前 10 章 讲 解 了 WPF 构建 应 用 程序 的 基础 知识 ,本 章 开始 学 习 WPF 的 样式 。WPF 中 
样式 的 作用 ,就 像 Web 中 的 CSS 一 样 ,为 界面 上 的 元 素 定 制 外 观 , 以 提供 更 好 的 用 户 界面 。 
在 WPF 中 ,可 以 为 控件 定义 统一 的 样式 (Style) ,也 可 以 使 用 样式 把 一 组 属性 应 用 到 一 个 或 
多 个 控件 上 ,实现 一 致 的 主题 风格 。 


11.1 样式 的 构成 


样式 (Styles) 由 设置 器 (Setter) Ah fa (Triggers) .资源 (Resources) 三 部 分 构成 。 
11.1.1 设置 器 
在 设置 器 中 创建 样式 的 XAML 代码 如 下 。 


< Style TargetType = "Button"> 
< Setter Property = "Background" Value = "Red" /> 
</Style> 
其 中 ,TargetType 是 目标 类 型 ; Property 是 属性 ; Value 是 取 值 。 上 述 代 码 是 将 目标 类 型 
指向 Button 后 ,设置 其 背景 色 为 红色 。 


11.1.2 样式 触发 器 


第 9 章 已 重点 讲解 过 触发 器 ,并 了 解 到 触发 器 (Triggers) 主要 分 为 三 类 : 属性 触发 器 、 
数据 触发 器 和 事件 触发 器 。 在 样式 中 ,也 要 使 用 触发 器 ,样式 中 使 用 触发 器 让 样式 的 使 用 更 
加 准确 、 灵 活 和 高 效 。 

样式 触发 器 是 属性 或 事件 发 生 时 才 会 被 触发 。 下 面 学 习 如 何 定 义 和 使 用 样式 中 的 单 属 
性 触发 器 、 多 属性 触发 器 、 多 条 件 属 性 触发 器 和 事件 触发 器 。 

1. 单 属 性 触发 器 

单 属性 触发 器 是 检查 从 属 属性 的 值 , 即 元 素 自身 属性 。 下 面 以 按钮 的 内 容 属性 为 例 ， 
XAML 代码 如 下 。 





< Window. Resources > 
<Style TargetType = "Button"> 
<Style. Triggers> 
< Trigger Property = "Content" Value = "按钮 "> 
< Setter Property = "ToolTip" Value = "这 是 一 个 按钮 "></Setter> 
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</Trigger > 
</Style. Triggers> 

</Style> 
«/Window. Resources > 
«Grid» 

< Button Margin = "12,12,401,270"-fi fl «/Button» 
«/Grid» 

«/ Window 


运行 上 述 代码 , 当 鼠 标 指针 移入 “按钮 ?时 ,页 面 显示 效果 如 
图 11.1 所 示 。 

2. 多 属性 触发 器 

多 属性 触发 器 是 检查 属性 的 所 有 可 能 值 ,符合 则 和 触发。 这 里 以 
按钮 的 内 容 属性 为 例 ,XAML 代码 如 下 。 





11.1 单 属性 触发 器 


< Window. Resources > 
< Style TargetType = "Button"> 
< Style. Triggers > 
< Trigger Property - "Content" Value = "按钮 "> 
< Setter Property = "ToolTip" Value = "这 是 一 个 按钮 "></Setter > 
</Trigger > 
< Trigger Property = "Content" Value = "Button"> 
< Setter Property = "ToolTip" Value = "This is a button"></Setter > 
</Trigger > 
</Style. Triggers> 
</Style> 
</Window. Resources > 
<Grid> 
< Button Content = "按钮 " Height = "23" Margin = "28, 29,394,259" /> 
< Button Content = "Button" Margin = "165,29,257,259" /> 
«/Grid» 
«/Window- 


运行 上 述 代码 , 当 鼠 标 指针 移入 “按钮 ?时 ,页面 显示 效果 如 图 11.2 所 示 。 当 鼠标 指针 
移入 Button 按钮 时 ,页面 显示 效果 如 图 11. 3 所 示 。 


Ra aa 
SEL 


图 11.2 多 属性 触发 器 (按钮 ) 图 11.3 多 属性 触发 器 (Button) 








3. 多 条 件 属性 触发 器 

多 条 件 属 性 触发 器 是 检查 多 个 属性 ,属性 取 值 都 符合 条 件 时 才 触 发 。 这 里 以 按钮 的 内 
容 属性 和 可 见 属性 为 例 .XAML 代码 如 下 。 

<! -一 (REI Window 代码 部 分 --> 

< Window. Resources > 


<Style TargetType = "Button"> 
< Style. Triggers > 
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<MultiTrigger > 
<! -- 条 件 列表 --> 
<MultiTrigger. Conditions> 
«Condition Property = "Content" Value = "按钮 "></Condition> 
«Condition Property - "Visibility" Value = "Visible"></Condition> 
«/MultiTrigger. Conditions > 
<! -- 样式 --> 
< Setter Property = "ToolTip" Value= "这 是 一 个 可 见 按钮 "></Setter> 
</MultiTrigger > 
</Style. Triggers> 
</Style> 
</Window. Resources > 
<Grid> 
< Button Content = "按钮 " Height = "23" Margin = "28,29, 394, 259" /> 
< Button Content = "Button" Margin = "156,29,266,259" /> 
«/Grid» 
</Window> 


和 运行 上 述 代码 , 当 鼠 标 指针 移 和 人“ 按钮? 时, 页面 显示 效果 如 图 11.4 所 示 。 当 鼠标 指针 
移入 Button 按钮 时 ,页 面 无 变化 。 

4. 事件 触发 器 

事件 触发 器 用 来 监听 事件 。 当 一 个 事件 发 生 时 ,事件 触发 器 就 会 引发 相关 的 动画 事件 
响应 。 这 里 以 按钮 的 “MouseEnter” 事 件 为 例 ,XAML 代码 如 下 。 


< Window. Resources > 
< Style TargetType = "Button"> 
< Style. Triggers > 
<! -- 事件 触发 器 -一 > 
<EventTrigger RoutedEvent = "MouseEnter"> 
< BeginStoryboard > 
< Storyboard > 
«DoubleAnimation Storyboard. TargetProperty = "Opacity" From = 
"1" To 7 "0.5" Duration = "0:0:3"/» 
«/Storyboard» 
«/BeginStoryboard- 
«/EventTrigger > 
</Style. Triggers > 
</Style> 
</Window. Resources > 
<Grid> 
< Button Content = "Button" Margin = "156,29, 266,259" /> 
</Grid> 
</Window> 


运行 上 述 代 码 , 当 鼠 标 指针 经 过 Button 按钮 时 ,按钮 的 透明 度 在 3 秒 内 从 1 降 到 0. 5。 
页 面 显示 效果 如 图 11. 5 所 示 。 


(5m ) (button) 
and mum 


图 11.4 多 条 件 属性 触发 器 图 11.5 事件 触发 器 
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11.1.3 样式 容器 


WPF 样式 可 以 将 多 个 属性 定义 在 一 个 样式 中 ,而 样式 又 存放 在 资源 中 ,资源 可 以 看 作 
存放 样式 和 对 象 的 容器 。 

在 前 两 节 讲 的 样式 的 设置 器 和 触发 器 都 放 在 Window 资源 的 < Window. Resources > 与 
</Window. Resources > 两 标签 之 间 。 由 此 也 可 以 得 出 资源 是 存放 样式 的 容器 。 在 本 节 不 
再 举例 说 明 样式 容器 。 

在 WPF 应 用 程序 中 ,通过 控件 的 属性 ,可 以 实现 更 改 控件 的 外 观 。 但 是 ,这 种 方式 局 
限 性 大 \ 不 灵活 且 不 利于 维护 。 接 下 来 ,定义 两 个 外 观 相同 的 Button,XAML 代码 如 下 。 

<Grid> 

< Button Height = "30" FontSize = "18" FontWeight = "Heavy" Margin = "6,6,398,275"» Buttonl 
</Button > 

< Button Height = "30" FontSize = "18" FontWeight = "Heavy" Margin = "6, 42, 398, 239"» Button2 
«/Button» 

«/Grid» 

上 面 只 有 两 个 按钮 ,倘若 数 十 个 按钮 或 者 整个 应 用 程序 中 所 有 的 按钮 ,都 这 样 给 它们 编 
写 相同 的 属性 ,无 疑 很 烦琐 且 不 易 维护 。 将 上 述 Button 的 属性 归纳 起 来 ,编写 到 一 段 样式 
中 ,为 按钮 指定 该 样式 (甚至 用 元 素 类 型 样式 时 ,都 不 需要 指定 按钮 样式 ), 所 有 按钮 就 具有 
统一 样式 和 外 观 了 。 如 果 想 修改 按钮 外 观 ,只 需要 修改 一 下 样式 代码 即 可 ,所 有 按钮 外 观 都 
会 随 之 变化 。 


11.2 使 用 样式 的 方法 


使 用 样式 有 多 种 方法 ,如 内 联 样式 (定义 在 元 素 内 部 ) .已 命名 样式 (为 样式 命名 ,使 用 时 
通过 名 称 引用 ) .元 素 类 型 样式 (为 一 种 类 型 的 元 素 ,指定 一 种 样式 ) 等 。 
11.2.1 内 联 样 式 


内 联 样式 是 在 元 素 定 义 时 ,在 元 素 内 部 通过 拓展 属性 Style 来 定义 样式 。 这 里 定义 一 
个 Button 控件 的 Style, XAML 代码 如 下 。 


<Button> 
<Button. Style> 
«Style» 
< Setter Property = "Button. FontSize" Value = "18"></Setter > 
< Setter Property = "Button. Width" Value = "103"»«/Setter > 
< Setter Property = "Button. Height" Value = "30"></Setter > 
< Setter Property = "Button. Content" Value = "Button"></Setter > 
«/Style» 
«/Button. Style» 
</Button > 


内 联 样式 的 缺点 在 于 ,如 果 想 为 多 个 元 素 指定 同一 种 样式 ,不 得 不 在 每 个 元 素 内 部 都 编 
写 同 一 种 样式 ,这 样 不 但 耗费 人 力 , 并 且 后 期 维护 性 差 。 就 像 网 页 中 的 内 联 CSS 一 样 。 所 
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以 ,一 般 将 样式 放 到 资源 中 ,在 元 素 定 义 时 ,为 其 指定 一 个 样式 (参见 “已 命名 样式 ”); 或 者 
在 资源 中 ,为 某 一 类 型 的 元 素 指定 一 个 样式 (参见 “元 素 类 型 样式 ”)。 


11.2.2 已 命名 样式 


已 命名 样式 是 将 相同 的 内 联 样式 归纳 起 来 , 放 入 资源 中 ,构成 一 个 样式 ,并 为 其 命名 。 
在 使 用 样式 时 ,通过 名 称 为 元 素 指定 该 样式 。 


<! -- 保留 Window 代码 部 分 --> 
< Window. Resources > 
< Style x:Key = "Stylel"> 
< Setter Property = "Button. FontSize" Value = "18"></Setter > 
< Setter Property = "Button. Width" Value = "103"></Setter > 
< Setter Property = "Button. Height" Value = "30"></Setter > 
</Style> 
«/Window. Resources > 
«Grid» 
«Button Style = "(StaticResource Stylel]" Margin = "23,32,95,139"» Button 
«/Button» 
«/Grid» 
</Window> 


代码 中 的 Button 调用 "Stylel? 已 命名 样式 来 设置 Button 样式 。 在 已 命名 样式 中 ,还 可 
指定 目标 类 型 .重用 样式 、 重 写 样式 、 拓 展 样式 。 

1. 指定 目标 类 型 (TargetType) 

在 上 述 代码 中 ,加 上 指定 目标 类 型 ,对 上 节 已 命名 样式 的 代码 进行 更 改 ,XAML 代码 
如 下 。 


<! -- 保留 Window 代码 部 分 --> 
« Window. Resources > 
< Style x:Key = "Stylel" TargetType = "(x:Type Button)" 
< Setter Property = "FontSize" Value = "18"></Setter> 
< Setter Property = "Width" Value = "103"></Setter > 
< Setter Property = "Height" Value = "30"></Setter > 
</Style> 
</Window. Resources > 
«Grid» 
< Button Style = "(StaticResource Stylel]" Margin = "23, 32,95, 139"» Buttonl </Button > 
«/Grid» 
</Window > 


上 述 代码 中 的 TargetType 可 以 修改 成 Control, 因 为 Button 是 从 Control 派生 而 来 
的 。 同 时 ,CheckBox 也 是 派生 自 Control, 所 以 将 Stylel 指定 给 CheckBox 也 是 合适 的 。 这 
样 就 能 使 多 种 元 素 共 用 一 种 样式 ,XAML 代码 如 下 。 

<! -- 保留 Window 代码 部 分 --> 

< Window. Resources > 


< Style x:Key = "Stylel" TargetType = "(x:Type Control }"> 
< Setter Property = "FontSize" Value = "18"></Setter > 
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< Setter Property = "Width" Value = "103"></Setter> 
«Setter Property = "Height" Value = "30"></Setter > 
</Style> 
</Window. Resources> 
< StackPanel > 
< Button Style = "{StaticResource Stylel]" Margin = "5, 20,20,5" Content = "Button1"/> 
< CheckBox Style = "{StaticResource Stylel]"Margin = "0, 20, 20,5" Content = "Checkboxl"/> 
«/StackPanel > 
</Window> 


运行 上 述 代码 ,页 面 显示 效果 如 图 11. 6 所 示 , Button 和 CheckBox 共用 同一 样式 
Stylel 。 但 是 ,如 果 在 StackPanel 布局 中 ,再 加 入 TextBlock 时 会 出 错 。 因 为 TextBlock 不 
是 派生 自 Control, 它 直接 继承 于 FrameworkElement。 加 入 TextBlock, 需要 使 用 重用 
样式 。 

2. 重用 样式 (Reusing Styles) 

重用 样式 是 指 样式 可 以 拥有 目标 所 没有 的 属性 。 如 果 定 义 样式 ,其 中 含有 不 被 所 有 元 
素 共 享 的 属性 ,而 只 希望 这 些 非 共享 属性 应 用 到 特定 的 元 素 上 。 此 时 ,可 以 去 掉 目 标 类 型 ， 
在 属性 名 称 前 加 类 名 。 在 图 11. 6 中 加 入 TextBlock 控件 , 让 Button, CheckBox 和 
TextBlock 3 控件 的 前 景色 为 红色 ,字号 18, 修 改 上 述 代码 ,使 用 重用 样式 ,XAML 代码 
如 下 。 


<! -- 保留 Window 代码 部 分 --> 
< Window. Resources > 
< Style x:Key= "Stylel"> 
< Setter Property = "Button. Width" Value = "103"></Setter > 
< Setter Property = "Button. Foreground" Value = "red"»«/Setter > 
< Setter Property = "CheckBox. FontSize" Value = "18"></Setter> 
< Setter Property = "CheckBox. IsChecked" Value = "True"></Setter > 
< Setter Property = "TextBlock. Background" Value = "lightgreen"></Setter > 
</Style> 
</Window. Resources > 
< StackPanel > 
«Button Style = "(StaticResource Stylel]" Margin = "0,10,20,5" Content = "Button1"/> 
< CheckBox Style = "(StaticResource Stylel]" Margin = "0,5, 20,5" Content = "Checkboxl"/» 
< TextBlock Style = "(StaticResource Stylel]" Margin = "0,0,10,5" Text = "Textblockl"/» 
«/StackPanel > 
«/Window? 


运行 上 述 代码 ,页面 显 示 效 果 如 图 11. 7 所 示 , Button, CheckBox 和 TextBlock 重用 样 
式 。 将 Stylel 同时 指定 给 Button、CheckBoxl 和 TextBlockl,TextBlocak 会 自动 忽略 不 适 
用 自身 的 样式 属性 IsChecked。 而 三 者 公有 的 属性 (如 Foreground、FontSize) 对 三 者 都 
有 效 。 

3. 重 写 样 式 (Overriding Style) 

重 写 样式 属性 类 似 于 面向 对 象 中 的 重 写 ,其 效果 也 类 似 于 CSS 中 的 样式 覆盖 。 最 终 的 
外 观 取决 于 最 近 的 样式 或 属性 。 
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11.6 Button 和 CheckBox 共用 同一 样式 图 11.7 Button,CheckBox 和 TextBlock 重用 样式 


现在 再 给 一 个 元 素 指定 了 一 个 样式 ,其 中 包含 FontSize 属性 值 为 18。 而 在 元 素 定义 
时 ,重新 给 它 的 属性 FontSize 设置 了 一 个 值 30。 最 终 元 素 文本 的 FontSize 将 为 30。 


<! -- 保留 Window 代码 部 分 --> 
< Window. Resources > 
<Style x:Key= "Stylel"> 
< Setter Property = "Button. FontSize" Value = "18"></Setter > 
</Style> 
</Window. Resources > 
<Grid> 
« Button Width= "110" Height = "50" FontSize = "30" > Button </Button > 
</Grid> 
</Window > 


4. 拓展 样式 (Extending Styles) 
该 样式 是 对 现 有 样式 进行 拓展 ,类 似 于 面向 对 象 中 的 继承 或 派生 ,可 以 添加 新 的 属性 或 
重 载 已 存在 的 属性 。 


<! -- 保留 Window 代码 部 分 --> 
« Window. Resources > 
< Style x:Key = "Stylel" TargetType = "Button" 
< Setter Property = "FontSize" Value = "18"></Setter > 
< Setter Property = "Foreground" Value = "Green"></Setter > 
</Style> 
< Style x:Key = "Style2" BasedOn = "(StaticResource Stylel)" TargetType = "Button"> 
<! -- 添加 新 属性 --> 
< Setter Property = "FontWeight" Value = "Bold"></Setter > 


<! -- 重 载 --> 
< Setter Property = "Foreground" Value = "Red"></Setter > 
</Style> 
</Window. Resources > 


<Grid> 
«Button Style = "{StaticResource Stylel]" Width= "80" Height = "30" FontSize = "18" 
Margin = "109,55, 109, 116"> Buttonl </Button > 
«Button Style = "(StaticResource Style2]" Width = "80" Height = "30" FontSize = "18" 
Margin = "109,120,109,51"» Button2 </Button > 
«/Grid» 
«/ Window 


11.2.3 元 素 类 型 样式 
在 页 面 设计 时 ,要 求 用 户 界面 上 的 相同 控件 风格 要 一 致 。 以 Button 为 例 ,页 面 上 所 有 


(202; wpF 编程 基础 





的 Button 大 小 相同 .颜色 统一 等 。 这 时 定义 一 种 元 素 的 样式 ,针对 一 个 范围 内 的 所 有 元 素 
都 有 效 , 这 就 是 元 素 类 型 样式 。 

元 素 类 型 样式 约束 同一 类 型 元 素 共享 外 观 。 如 果 希 望 一 个 顶级 窗口 内 所 有 的 元 素 , 具 
有 相同 的 样式 和 外 观 。 实 现 方法 分 为 以 下 两 个 步骤 。 

(1) 在 顶级 窗口 资源 中 定义 一 个 样式 ,不 标记 x: Key, 将 TargetType 设置 为 一 种 元 素 
类 型 。 

(2) 定义 元 素 , 不 用 指定 Style, 窗 口中 所 有 该 类 型 的 元 素 ,都 将 使 用 资源 中 定义 的 样 
式 , 并 具有 统一 外 观 。 

下 面 在 Window 中 分 别 定 义 Button 和 TextBlock 的 样式 ,随后 再 定义 Button 和 
TextBlock, 其 XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 --> 
« Window. Resources > 
<! —- Button 样式 --> 
< Style TargetType = " {x: Type Button}"> 
< Setter Property = "FontWeight" Value = "Normal"></Setter > 
< Setter Property = "Foreground" Value = "Green"»«/Setter > 
«/Style» 
<! -- TextBlock 样式 -- 
< Style TargetType = "TextBlock"> 
< Setter Property = "FontSize" Value = "16"></Setter > 
< Setter Property = "Foreground" Value = "Red"></Setter > 
</Style> 
</Window. Resources > 
< StackPanel > 
«Button Name = "Buttonl" Width= "128" Height = "30" 
Margin = "0,10,20,5" > Buttonl «/Button» 
«Button Name = "Button2" Width = "128" Height = "30" Margin = "0,5,20,5"» Button2 
</Button> 
<TextBlock Name = "TextBlockl" Height = "30" Margin = "50, 0,10,5"> TextBlockl 
«/TextBlock» 
«TextBlock Name = "TextBlock2" Margin = "50,0,10,5" » TextBlock2 </TextBlock > 
«/StackPanel » 
«/ Window 


运行 上 述 代 码 ,页 面 显示 效果 如 图 11. 8 所 示 。 上 述 代码 
中 的 元 素 类 型 样式 定义 在 了 Window 中 。 用 户 定 义 的 样式 所 
在 的 范围 决定 样式 所 在 的 范围 ,样式 除了 定义 在 Window 中 ， 
还 可 以 定义 在 面板 资源 和 应 用 程序 资源 中 。 


在 Grid 面板 中 定义 Button 样式 ,XAML 代码 如 下 。 TextBlock1 
TextBlock2 

















<! -- 保留 Window 代码 部 分 --> 
<Grid> 
< Grid. Resources > 
<! -- Button 样式 -一 > 
< Style TargetType = "(x:Type Button}"> 
< Setter Property = "Foreground" Value = "Green"»«/Setter > 


图 11.8 元 素 类 型 样式 
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</Style> 
</Grid. Resources > 
< Button Margin = "145, 113, 113, 118"> Button </Button > 
</Grid> 
«/Window» 


在 应 用 程序 范围 ,定义 Button 样式 ,XAML 代码 如 下 。 


< Application. Resources> 
<! -- Button 样式 --> 
< Style TargetType = " {x:Type Button}"> 
< Setter Property = "Foreground" Value = "Green"></Setter > 
</Style> 
</Application. Resources > 
</Application > 


11.2.4 编程 控制 样式 


编程 控制 样式 是 通过 代码 更 改 样式 。 下 面 在 Window 中 定义 两 个 指向 Button 的 样式 ， 
并 定义 两 个 Button 元 素 ,XAML 代码 如 下 。 


<! -- 保留 Window 代码 部 分 --> 
« Window. Resources > 
<! -- Stylel -一 > 
< Style x:Key = "Stylel" TargetType = "{x:Type Button}"> 
< Setter Property = "FontWeight" Value = "Normal"></Setter > 
< Setter Property = "Foreground" Value = "Green"></Setter > 
< Setter Property = "Height" Value = "40"></Setter > 
< Setter Property = "Width" Value = "150"></Setter> 
</Style> 
<! -- Style2 
< Style x:Key = "Style2" TargetType = " (x: Type Button)" 
< Setter Property = "FontWeight" Value = "Bold"></Setter > 
< Setter Property = "Foreground" Value = "Red"></Setter > 
< Setter Property = "Width" Value = "150"></Setter > 
< Setter Property = "Height" Value = "40"></Setter > 
</Style> 
</Window. Resources > 
<Grid Width= "513" Height = "316"> 
«Button Name = "Buttonl" Style = "(StaticResource Stylel}" Margin = "30, 5, 323, 227"> 
Button </Button > 
«Button Name = " ChangeStyleButton" Style = " (StaticResource Stylel])" Click = 
"ChangeStyleButton Click" Margin = "30, 66,323,170" Height = "42"» Change Buttonl's 
Style </Button > 
</Grid> 
</Window> 





在 后 台 添加 ChangeStyleButton 的 Click 事件 ,CS 代码 如 下 。 


private void ChangeStyleButton Click(object sender, RoutedEventArgs e) 
{ 
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this. Button1. Style = (Style)FindResource("Style2"); 
) 


运行 完整 的 代码 , 单 击 ChangeStyleButton 按钮 后 ,页 面 显示 效果 如 图 11. 9 所 示 ， 
Buttonl 由 Stylel ÆT Style2, 原 来 的 绿色 变 成 了 红色 。 

















11.9 编程 控制 样式 


11.3 模 板 


在 11.1 节 和 11.2 节 中 了 解 了 样式 的 构成 和 使 用 样式 的 方法 。 如 要 自 定义 用 户 控件 ， 
通过 Style 只 能 改变 控件 的 已 有 属性 值 (如 颜色 .字体 等 )。 使 用 控件 模板 可 以 改变 控件 的 
内 部 结构 (VisualTree 可 视 化 树 ) 来 完成 更 为 复杂 的 定制 。 

WPF 模板 有 ControlTemplate, Data Template 和 ItemsPanelTemplate 3 种 ,它们 都 继 
承 自 FrameworkTemplate 抽象 类 。 在 这 个 抽象 类 中 有 一 个 FrameworkElementFactory 类 
型 的 VisualTree 变量 ,通过 该 变量 可 以 设置 或 者 获取 模板 的 根 结 点 ,包含 外 观 元素 树 。 用 
户 自 定义 控件 时 ,可 以 使 用 ControlTemplate 来 定制 ,这 是 改变 Control 的 呈现 ,也 可 以 通过 
DataTemplate 来 改变 Data 的 呈现 ; 对 于 ItemsControl, 还 可 以 通过 ItemsPanel Template 来 
改变 Items 容器 的 呈现 。 其 中 , ControlTemplate 和 ItemsPanelTemplate 是 控件 模板 ， 
DataTemplate 是 数据 模板 。 


11.3.1 定制 模板 


WPF 的 每 一 个 控件 都 有 一 个 默认 的 模板 ,该 模板 描述 了 控件 的 外 观 以 及 外 观 对 外 界 刺 
激 所 做 出 的 反应 。 用 户 可 以 自 定义 一 个 模板 来 替换 控件 的 默认 模板 ,以 便 打 造 个 性 化 的 
控件 。 

下 面 定制 椭圆 形 按 钮 。 要 求 按钮 的 外 边框 颜色 从 白色 到 绿色 渐变 ; 按钮 内 部 颜色 从 银 
色 到 白色 渐变 ; 当 鼠 标 指针 滑 过 按钮 后 ,按钮 中 的 文字 变 成 红色 。 

分 析 这 个 椭圆 形 按 钮 的 设计 需求 ,需要 替换 Button 控件 默认 的 模板 。 首 先 ,确定 要 使 
用 Control Template 这 个 控件 模板 ; 其 次 ,代码 中 要 声明 一 个 ControlTemplate 对 象 ,并 对 
该 对 象 做 相应 的 配置 ; 最 后 ,再 将 这 个 Control Template 对 象 赋值 给 控件 的 Template 属性 
即 可 。 现 在 先 认 识 ControlTemplate 的 VisualTree 和 Triggers 两 个 重要 属性 。 

CD. VisualTree, 模 板 的 可 视 化 树 ,控件 的 外 观 就 是 使 用 这 个 属性 来 描述 的 。 

(2) Triggers, 触 发 器 列表 ,里 面包 含 一 些 触 发 器 Trigger, 定 制 这 个 触发 器 列表 来 使 控 
件 对 外 界 的 操作 做 出 响应 ,如 鼠标 指针 经 过 按钮 时 ,文字 变 成 红色 。 
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通过 上 面 的 分 析 , 设 计 椭圆 形 按钮 ,从 可 视 化 树 和 触发 器 两 方面 展开 设计 ,XAML 代码 
如 下 。 


<! -- 保留 Window 代码 部 分 --> 
< Window. Resources > 
< Style TargetType = "(x:Type Button}" x:Key = "(x:Type Button}"> 
< Setter Property = "Template"^ 
< Setter. Value? 
< ControlTemplate TargetType = "{x:TYpe Button}"> 
<! -- 定义 可 视 化 树 -一 > 
<Grid> 
<Ellipse> 
<Ellipse. Stroke> 
<LinearGradientBrush> 
< GradientStop Offset = "0" Color = "White" /> 
< GradientStop Offset = "1" Color = "Green" /> 
«/LinearGradientBrush- 
«/Ellipse. Stroke > 
< Ellipse. Fill > 
< LinearGradientBrush> 
< GradientStop Offset = "0" Color = "Silver" /> 
< GradientStop Offset = "1" Color = "White" /> 
</LinearGradientBrush> 
«/Ellipse. Fill» 
«/Ellipse» 
< ContentPresenter Margin = "10" 
HorizontalAlignnment = "Center" 
VerticalAlignment = "Center" /> 
«/Grid» 
<! -- 结束 可 视 化 树 定义 --> 
<! -- 定义 触发 器 一 > 
< ControlTemplate. Triggers > 
< Trigger Property = "Button. IsMouseOver" Value = "True"> 
< Setter Property = "Button. Foreground" Value = "Red" /> 
</Trigger> 
</ControlTemplate. Triggers> 
<! -- 结束 触发 器 定义 --> 
</ControlTemplate> 
</Setter. Value> 
</Setter > 
</Style> 
</Window. Resources > 
<Grid> 
«Button Content = "Hello, Button" Margin = "28" Name = "buttonl" VerticalAlignnent = 
"Top" Width- "105" /> 
«/Grid» 
</Window > 


运行 上 述 代码 ,页 面 显示 效果 如 图 11. 10 所 示 。 当 鼠标 指针 滑 过 "Hello，Button ”时 ， 
页 面 显 示 效 果 如 图 11. 11 所 示 。 代 码 可 分 为 可 视 化 树 定义 和 触发 器 定义 ,其 中 可 视 化 树 定 
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义 中 包含 椭圆 形 、 椭 圆 形 外 边框 的 颜色 、 椭 圆 形 内 容 的 填充 颜色 ; 触发 器 定义 实现 鼠标 指针 
经 过 按钮 时 ,文字 变 成 红色 。 
































图 11.10 椭圆 形 按钮 定制 模板 图 11.11 鼠标 滑 过 椭圆 


11.3.2 样式 与 控件 模板 


由 定制 模板 可 知 ,样式 与 模板 本 质 的 区 别 是 : 样式 只 能 通过 改变 控件 的 已 有 属性 值 (如 
颜色 、 字 体 ) 来 简单 定制 控件 。 但 是 控件 模板 可 以 改变 控件 的 内 部 结构 (VisualTree、 可 视 化 


树 ) 来 完成 更 为 复杂 的 定制 。 
在 此 ,设计 一 个 按钮 的 数据 模板 ,按钮 控件 内 容 是 由 图 片 和 文字 两 部 分 内 容 组 合 而 成 


的 。 依 然 将 样式 放 在 资源 中 ,XAML 代码 如 下 。 
<! -- 保留 Window 代码 部 分 --> 


< Window. Resources > 
< ControlTemplate TargetType = "Button" x:Key = "ButtonTemplate"> 
<Grid> 
<Grid.ColumnDefinitions > 
< ColumnDefinition Width = "100"/> 
< ColumnDefinition Width = " * "/> 
</Grid. ColumnDefinitions > 
< Grid Grid. Column = "0"> 
< Image Source = "/Images/shopping. png"></Image > 
</Grid> 
< Grid Grid. Column = "1"> 
«Label Content = "购物 车 ”FontFamily = "微软 雅 黑 " HorizontalAlignment = 
"Center" VerticalAlignment = "Center" /> 
</Grid> 
</Grid> 
</ControlTemplate > 
</Window. Resources > 
<Grid> 
< Button FontSize = "40" Template = "(StaticResource ButtonTemplate}"/> 
</Grid> 
</Window > 


运行 上 述 代码 ,页 面 显示 效果 如 图 11. 12 Brzs ;. Her." Target Type "Button" "语句 放 
在 了 控件 模板 的 位 置 ,表示 使 用 该 模板 的 控件 类 型 是 Button, " x: Key — " Button Template "” 语 
句 命名 模板 资源 ID; * Template— " (StaticResource ButtonTemplate) " ”语句 是 通过 模板 资 


源 ID 来 调用 控件 模板 。 
当 页 面 运行 后 的 效果 如 图 11. 13 所 示 时 , 则 需要 修改 的 XAML 代码 如 下 。 
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« Grid Grid. Column = "0"> 
< Image Source = "/Inages/page. png" «/Image > 
«/Grid» 
< Grid Grid. Column = "1"> 
< Label Content = "网 站 首页 ” /> 
</Grid> 





E} MainWindow [EIE] 
































11.12 按钮 样式 模板 图 11.13 套用 按钮 样式 模板 


11.3.3 样式 与 数据 模板 


在 11.3.2 节 中 了 解 到 控件 模板 表示 控件 外 观 的 显示 方式 ,而 数据 模板 是 数据 内 容 的 呈 
现 方式 。 相 同 的 数据 内 容 , 可 以 让 它 的 表现 方式 多 样 化 。 数 据 模板 适用 于 Content Control 
类 控件 与 Items Control 类 控件 。 

在 此 构建 Person 类 ,CS 代码 如 下 。 


namespace ButtonDataTemplate 
{ 
public class Person 
{ 
public string Name { get; set; } 
public string Sex { get; set; } 
public string Address { get; set; } 
public string Photo { get; set; } 


} 


再 创建 PersonCollection, 继 承 自 Person, 作 用 是 收集 数据 ,并 为 MVVM 模式 中 的 
ViewModel 做 准备 。 


public class PersonCollection : Person 
{ 
System. Collections. ObjectModel. ObservableCollection < Person > persons = new System. 
Collections. 0bjectModel. ObservableCollection < Person»(); 
public PersonCollection() 
{ 
persons. Add(new Person() 
{ 
Address = "北京 "， 
Name = "JL EE — I", 
Photo = "/Inmages/Beipiao. jpg", 
Sex= "5" 
n; 
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persons. Rdd(new Person() 
{ 
Address = "山西 "， 
Name = "高 山 流水 "， 
Photo = "/Images/Gaosanls. jpg", 





np; 


persons. Add( new Person() 


{ 
Address = "河北 "， 
Name = "HERE", 
Photo = "/Images/Heyuhy. png", 
Sex= "8" 
H; 
} 
public System. Collections. ObjectModel. ObservableCollection < Person» PersonList 
1 
get ( return this. persons; } 


} 
还 需要 将 ViewModel 与 界面 建立 关联 关系 ,CS 代码 如 下 。 


public MainWindow() 
{ 

InitializeComponent(); 

this.DataContext = new PersonCollection(); // 实 现 MVVM 的 核心 语句 
} 


最 后 需要 设计 前 台 用 户 的 UI 界面 ,用 数据 模板 和 ListBox 来 显示 数据 ,还 采用 数据 绑 
定 技术 ,XAML 代码 如 下 。 


« Window x:Class = "ButtonDataTemplate. MainWindow" 
xmlns = "http://schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x = "http: //schemas. microsoft. com/winfx/2006/xaml" 
xnlns:local- "clr- namespace:ButtonDataTemplate" 
Title = "MainWindow" Height = "350" Width = "525" 
< Window. Resources > 
< DataTemplate xmlns:local = "clr- namespace:ButtonDataTemplate" 
x:Key = "MyDataTemplate" DataType = "(x:Type local:Person]"» 
«Grid VerticalAlignment = "Center" HorizontalAlignment = "Center" Margin = "4" > 
< Grid. ColumnDefinitions > 
< ColunnDefinition Width = "Auto"/» 
< ColunnDefinition Width = "Auto"/» 
«/Grid. ColumnDefinitions > 
< Image Source = "(Binding Photo)" Width- "150" Grid. Column = "0" 
Grid. RowSpan = "1"/» 
< TextBlock Text = "(Binding Name]" Grid. Column = "1" Grid.ColumnSpan = "1" 
HorizontalAlignment = "Center" VerticalAlignment = "Center" /> 
«/Grid» 
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</DataTemplate> 
</Window. Resources > 
<Grid> 
<ListBox ItemsSource = "(Binding PersonList]" 
ItemTemplate = "(StaticResource MyDataTemplate]"/» 
«/Grid» 
«/ Window» 


运行 上 述 代码 ,页面 显示 效果 如 图 11.14 所 示 。 观 察 该 数据 模板 ,并 不 是 非常 好 看 ,下 
面 采用 样式 模板 重新 设 定 ,XAML 代码 如 下 。 


< Window. Resources > 
< Style TargetType = "ListBoxItem" x:Key - "ListViewItemStyle" 
< Setter Property = "Template" 
< Setter. Value > 
< ControlTenplate TargetType = "ListBoxIten" x:Name = "ListBorder"» 
< Border BorderBrush = "Red" BorderThickness = "1"> 
«Grid» 

< Grid. ColumnDef initions > 
< ColumnDefinition Width = "190"/» 
< ColumnDefinition Width = " * "/» 

«/Grid. ColumnDefinitions > 

< Grid Grid. Column = "0"> 
< Image Source = "(Binding Photo]" Name = "Image" /> 

«/Grid» 

< Grid Grid. Column = "1"> 
<Label Content = " {Binding Name}" x:Name = "textContent" 





FontFamily = "微软 雅 黑 "VerticalAlignment = "Center" 
HorizontalAlignment = "Center" /> 
</Grid> 
</Grid> 
</Border > 
</ControlTemplate> 
«/Setter. Value» 
</Setter> 
</Style> 


</Window. Resources > 
<Grid> 
<ListBox ItemsSource = "(Binding PersonList]" 
ItemContainerStyle = "(StaticResource ListViewlItemStyle]"/^ 
«/Grid» 


«/Window- 


运行 上 述 代 码 , 页 面 显示 效果 如 图 11. 15 所 示 。 将 控件 模板 放 入 样式 中 ,为 Grid 加 了 
红色 的 边框 线 。 
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图 11.14 数据 模板 图 11.15 列表 样式 模板 


11.3.4 列表 与 项 目 模板 


11.3. 3 节 将 控件 模板 放 和 人 样式 中 ,为 Grid 加 了 红色 的 边框 线 。 但 是 操作 鼠标 ,页 面 没 
有 变化 。 原 因 是 在 触发 器 中 没有 做 效果 设 定 。 下 面 在 ListBox 中 引入 ItemsPanelTemplate 
来 实现 ,在 这 里 将 它 简称 为 列表 模板 。 

针对 上 述 需求 ,在 触发 器 中 修改 Border 背景 色 。 当 单 击 鼠 标 时 ,背景 为 红色 ; 当 鼠 标 
指针 滑 过 时 ,背景 为 天 蓝 色 。 在 上 节 的 代码 基础 上 ,省 略 相 同 的 代码 部 分 ,给 出 有 变化 及 增 
加 的 XAML 代码 如 下 。 


<! -- K --> 

< Border BorderBrush = "Red" BorderThickness = "1" x:Name = "SS"> 
«-- HN ==> 

«/Border » 


< ControlTenplate. Triggers > 
< Trigger Property = "IsMouseOver" Value = "True"> 
< Setter Property = "Background" Value = "SkyBlue" TargetName = "SS"/> 
«/Trigger > 
< Trigger Property = "IsFocused" Value = "True" 
< Setter Property = "Background" Value = "Red" TargetName = "SS"/> 
«/Trigger > 
«/ControlTenplate. Triggers > 
= ek -- 
<Grid> 
< ListBox ItemsSource = " {Binding PersonList}" 
ItemContainerStyle = "(StaticResource ListViewItemStyle}"/> 
</Grid> 


运行 上 述 代码 ,在 第 一 张 图 片上 单 击 鼠标 后 ,背景 变 成 红色 ,页 面 显示 效果 如 图 11. 16 
所 示 。 当 鼠标 指针 滑 过 第 2 张 图 片 时 ,背景 变 成 蓝 色 ,页 面 显示 效果 如 图 11. 17 所 示 。 
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图 11.16 单 击 鼠标 的 页 面 效果 图 11. 17 鼠标 指针 滑 过 的 页 面 效 果 


现在 让 列表 项 横向 显示 ,需要 重 写 ListBox 的 ItemsPanel 并 修改 布局 为 WrapPanel, 省 
略 与 上 述 代码 相同 部 分 ,给 出 ListBox 控件 的 XAML 代码 如 下 。 


<! -- NE --> 
«/Window. Resources > 
«Grid» 
< ListBox Background = "Transparent" Margin = "0,5,0,5" BorderBrush = "Transparent" 
ItemsSource = "(Binding PersonList}" 
ItemContainerStyle - "(StaticResource ListViewItemStyle} "> 
< ListBox. ItemsPanel > 
< ItensPanelTenplate > 
< WrapPanel Orientation = "Horizontal" /> 
</ItemsPanelTemplate> 
</ListBox. ItemsPanel > 
</ListBox> 
</Grid> 


运行 上 述 代码 ,页面 显 示 效 果 如 图 11.18 所 示 。 因 为 列表 控件 都 是 从 ItemsPanel 继承 
而 来 的 ,ItemsPanel 模板 中 改 用 了 WrapPanel, 故 此 列表 项 中 的 数据 横向 显示 。 
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图 11. 18 列表 项 横向 显示 效果 
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11.3.5 主题 与 皮肤 


主题 和 皮肤 是 两 个 易 混淆 的 概念 。 主 题 是 指 应 用 程序 外 观 的 数据 集合 。 而 皮肤 可 以 随 
着 应 用 程序 而 变化 。 用 户 通 过 更 换 皮 肤 (简称 换 肤 ) 实 现 最 终 的 用 户 定制 。 

主题 通常 涉及 操作 系统 的 可 视 化 特性 , 它 会 反映 在 所 有 程序 的 用 户 界 面 的 元 素 上 。 
WPF 并 没有 独特 的 “皮肤 ”概念 ,也 没有 一 个 正式 的 “ 换 肤 ”概念 ,但 是 它 可 以 通过 其 动态 资 
源 机 制 、 样 式 和 模板 来 实现 换 肤 功能 。 

把 样式 ,模板 和 资源 放 在 一 起 ,就 构成 一 个 功能 包 。 这 个 功能 包 定 义 控件 完整 的 外 观 。 
它 就 是 一 个 控件 主题 。 主 题 实质 上 是 一 个 资源 字典 。 在 样式 或 控件 模板 中 的 资源 属性 
(Resource) 都 是 资源 字典 类 型 (ResoourceDirectionary) 。 

当 “ 皮 肤 ” 这 个 术语 被 应 用 到 用 户 界面 中 时 ,其 实质 就 是 指 被 运用 于 用 户 界面 上 的 所 有 
界面 元 素 的 可 视 化 样式 。 一 个 可 “ 换 肤 ”的 用 户 界面 既 可 以 在 编译 时 定制 ,也 可 以 在 运行 时 
定制 (定制 皮肤 )。WPF 为 用 户 界 面 的 “ 换 肤 ” 提 供 了 强大 的 支持 。 

对 于 一 个 软件 来 说 ,在 很 多 情形 下 * 换 肤 ? 也 许 将 变 得 非常 重要 。 用 户 可 以 根据 个 人 审 
美观 念 来 定制 自己 的 软件 界面 。 当 做 企业 级 的 业务 时 ,公司 开发 的 应 用 程序 被 分 发 成 多 种 
客户 端 ,每 个 客户 端 需要 拥有 它 自 己 的 Logo、 颜 色 、 字 体 等 ,此 时 也 需要 “ 换 肤 ”。 

下 面 通过 Button 实现 Grid 页 面 “ 换 肤 ” 功 能 。 

(1) 创建 一 个 资源 字典 的 XAML 文件 ,并 定义 ResourceDictionary 对 象 ,此 处 的 文件 命 
名 为 SkinResourceDictionary. xaml。 该 XAML 文件 的 代码 如 下 。 


< ResourceDictionary xmlns = "http://schemas. microsoft. com/winfx/2006/xaml/presentation" 

xmlns:x = "http://schemas. microsoft. con/winfx/2006/xaml"» 

«t-- Elki--» 

«Style x:Key = "skin Yellow" 

< Setter Property = "Control. Background" 
< Setter. Value? 
< LinearGradientBrush StartPoint = "0.5,0" EndPoint- "0.5,1" > 

« GradientStop Color - "Yellow" Offset - "0" /» 
< GradientStop Color = "WhiteSmoke" Offset = "0.5" /> 
< GradientStop Color = "Yellow" Offset = "1" /> 


«/LinearGradientBrush > 
«/Setter. Value» 
«/Setter > 
«/Style» 
«'-- Klk2--» 


< Style x:Key = "skin Green" 
< Setter Property = "Control. Background" 
«Setter. Value? 
< LinearGradientBrush StartPoint = "0.5,0" EndPoint = "0.5,1"» 
< GradientStop Color = "Green" Offset = "0" /> 
< GradientStop Color = "WhiteSmoke" Offset = "0.5" /> 
< GradientStop Color = "Green" Offset = "1" /» 
«/LinearGradientBrush- 
«/Setter. Value» 
«/Setter» 
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</Style> 
</ResourceDictionary> 


(2) 在 App. xaml 文件 中 引入 资源 ,App. xaml 文件 如 下 。 


< Application x:Class = "SkinDictionary. App" 
xmlns = "http: //schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x- "http: //schemas. microsoft. com/winfx/2006/xaml" 
StartupUri = "MainWindow. xaml"» 
< Application. Resources > 
<! -- 引入 资源 库 --> 
< ResourceDictionary> 
< ResourceDictionary. MergedDictionaries > 
< ResourceDictionary Source = "SkinResourceDictionary. xaml"></ResourceDictionary > 
</ResourceDictionary. MergedDictionaries > 
</ResourceDictionary> 
</Application. Resources > 
</Application> 


(3) 指定 需要 换 肤 的 对 象 的 style 为 DynamicResource ,XAML 代码 如 下 。 


« Window x:Class = "SkinDictionary. MainWindow" 
xmlns = "http: //schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x = "http: //schemas. microsoft. com/winfx/2006/xaml" 
Title = "MainWindow" Height = "350" Width = "525" 
< Grid Style = "(DynamicResource skin Yellow)" x:Name = "MYGrid"> 
< Button x: Name = "ChangeSkinButton" FontSize = "20" Margin = "100" Content = " 换 肤 " 
Click = "ChangeSkinButton_Click"> 
</Button > 
</Grid> 
</Window > 


(4) 编写 换 肤 的 方法 ,后 台 CS 代码 如 下 。 


public partial class MainWindow : Window 
{ 
public MainWindow() 
t 
InitializeComponent(); 
) 
private int skinstyle- 1; 
private void ChangeSkinButton Click(object sender, RoutedEventArgs e) 
{ 
if (skinstyle == 1) 
{ 
this. MyGrid. Style = (Style)Application. Current. Resources[ "skin Yellow"]; 
skinstyle- 2; 
) 
else 
{ 
this.MyGrid. Style = (Style)Application. Current. Resources["skin Green"]; 
skinstyle- 1; 





运行 完整 的 代码 ,页 面 显示 效果 如 图 11. 19 所 示 。 在 单 击 图 11. 19 中 的 “ 换 肤 ” 按 钮 后 ， 
页 面 显示 效果 如 图 11. 20 所 示 。 





























NE MainWindow ER N Main Window. re 
[= = | D- | 
11.19. 初始 化 黄色 皮肤 页 面 11.20 换 肤 为 绿色 皮肤 页 面 


11.4 小 结 


本 章 重 点 讲述 了 样式 的 构成 ,如 何 使 用 样式 及 模板 。 还 涉及 主题 和 皮肤 ,并 演示 了 
WPF 实现 换 肤 的 操作 步骤 。 


习题 与 实验 11 


1. 编写 样式 1CStyleD AREG ,如 图 11. 21 所 示 , 当 单 击 Change Buttonl's Style 按钮 后 ， 


页 面 显示 效果 如 图 11. 22 所 示 ,Buttonl 由 Stylel 变 成 了 Style2 , 原来 的 绿色 变 成 了 蓝 色 ， 
FREK. 
































图 11.21 Stylel 图 11. 22 Style2 


2. 设计 某 餐 厅 的 食品 展示 页 面 ,如 图 11. 23 所 示 。 页 面包 含 食品 图 片 和 食品 名 称 。 

3. 通过 Button 实现 Grid 页 面 “ 换 肤 ” 功 能 : 初始 为 白色 , 单 击 “ 换 肤 ”按钮 后 ,页 面 红 色 
和 蓝 色 切 换 。 换 肤 初始 页 面 效 果 如 图 11. 24 所 示 , 换 肤 到 红色 背景 页 面 效果 如 图 11. 25 所 
示 , 换 肤 到 蓝 色 背 景 页 面 效果 如 图 11. 26 所 示 。 
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图 11.24 换 肤 初始 页 面 图 11.25 换 肤 到 红色 背景 


4. 自 定义 用 户 控 件 , 实 现 如 图 11. 27 所 示 的 页 面 效 果 。 图 11. 28 是 项 目的 文件 结构 。 

















EÈ MoinWindow [m 
图 11.26 换 肤 到 蓝 色 背景 图 11.27 自 定义 时 钟 控件 
设计 提示 : 


(1) Watch 类 是 Control 的 派生 类 ,具有 表示 时 间 、 小 时 分钟. 秒 的 4 个 DependencyProperty， 
Watch 就 是 自 定 义 控件 。 该 控件 也 可 以 被 其 他 项 目 引 用 。 

(2) 在 当前 项 目 中 存在 的 XAML 文件 中 使 用 该 自 定 义 控件 方法 ,将 此 XmlNamespace 
特性 添加 到 要 使 用 该 特性 的 标记 文件 的 根 元 素 中 。 添 加 代码 示例 如 下 。 


xmlns:MyNamespace = "clr - namespace: WpfApplication3" 





B App.config 

b [à Appxaml 

» [€ MainWindowxaml 
1) Watch.cs 





11.28 文件 结构 
G) 在 其 他 项 目 中 存在 的 XAML 文件 中 使 用 该 自 定 义 控件 的 方法 是 : 将 此 
XmlNamespace 特性 添加 到 要 使 用 该 特性 的 标记 文件 的 根 元 素 中 ,添加 代码 示例 如 下 。 
xmlns :MYNamespace = "clr - nanespace:WpfApplication3;assembly = WpfApplication3" 


(4) Themes 文件 夹 下 的 Generic. xaml 是 样式 定义 ,该 样式 以 资源 字典 的 形式 存在 。 
(5) 资源 字典 可 以 在 当前 项 目 中 被 调用 ,也 可 以 被 其 他 项 目 引用 。 





MVVM 设计 模式 


最 早 提 出 设计 模式 概念 的 是 建筑 设计 大 师 亚历山大 (Alexander)。1970 年 ,亚历山大 
在 其 著作 (建筑 的 永恒 之 道 ) 里 描述 了 设计 模式 。 其 描述 是 这 样 的 : 模式 是 一 条 由 3 个 部 分 
组 成 的 通用 规则 , 它 表示 了 一 个 特定 环境 ,一 类 问题 和 一 个 解决 方案 之 间 的 关系 。 每 一 个 模 
式 描述 了 一 个 不 断 重复 发 生 的 问题 ,以 及 该 问题 解决 方案 的 核心 设计 。 他 还 在 另 一 本 书 ( 建 
筑 模式 语言 ) 中 提 到 了 现在 已 经 定义 了 253 种 模式 。 尽 管 亚 力 山大 的 著作 是 针对 建筑 领域 
的 ,实际 上 他 的 观点 适用 于 所 有 的 工程 设计 领域 ,其 中 包括 软件 设计 领域 。 


12.1 软件 设计 模式 


“软件 设计 模式 ”这 个 术语 是 在 20 世纪 90 年 代 由 Erich Gamma 等 人 从 建筑 设计 领域 
引入 到 计算 机 科学 中 来 的 。 


12.1.1 设计 模式 的 概念 


软件 设计 模式 (Design Pattern) 是 一 套 被 反复 使 用 、 多 数 人 知晓 的 、 经 过 分 类 编目 的 、 代 
码 设计 经 验 的 总 结 。 使 用 设计 模式 是 让 代码 更 容易 被 他 人 理解 .保证 代码 可 靠 性 ,程序 的 重 
用 性 ,让 软件 具有 高 内 聚 、 低 耦合 特性 。 

软件 内 聚 其 实 是 从 化 学 中 的 分 子 的 内 聚 演变 过 来 的 ,化 学 中 的 分 子 间 的 作用 力 强 , 则 表 
现 为 内 聚 程度 高 。 因 此 说 ,软件 中 内 聚 程度 的 高 低 标志 着 软件 设计 的 好 坏 。 低 耦合 是 用 来 
度量 模块 与 模块 直接 的 依赖 关系 、 感 知 程度 ,耦合 的 衡量 标准 是 从 低 到 高 ,一 般 来 说 ,耦合 度 
越 低 越 好 。 


12.1.2 设计 模式 的 原则 


为 什么 要 提倡 设计 模式 呢 ? 根本 原因 是 为 了 代码 复 用 ,增加 可 维护 性 。 那 么 怎么 才能 
实现 代码 复 用 呢 ? 则 需要 遵循 设计 模式 的 六 大 原则 。 

1. 开 闭 原则 (Open Close Principle) 

1988 年 , 勃 兰 特 。 梅 耶 (Bertrand Meyer) 在 他 的 著作 (面向 对 象 软件 构造 》(Object Oriented 
Software Construction) 中 提出 了 开 闭 原则 , 它 的 原文 是 这 样 的 :“Software entities should be 
open for extension,but closed for modification”。 它 表达 的 意思 是 “软件 模块 应 该 对 扩展 开 
放 , 对 修改 关闭 ”。 以 程序 需要 增添 新 功能 为 例 , 不 能 去 修改 原 有 的 代码 ,而 是 新 增 代码 。 这 
正如 实现 一 个 热 插 拔 的 效果 ( 热 插 拔 : 灵活 的 去 除 或 添加 功能 ,不 影响 到 原 有 的 功能 )。 这 
样 做 的 目的 是 为 了 使 程序 的 扩展 性 好 ,易于 维护 和 升级 。 
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2. 里 氏 代 换 原 则 (Liskov Substitution Principle? 

里 氏 代 换 原 则 是 继承 复 用 的 基石 ,只 有 当 衍 生 类 可 以 替换 掉 基 类 ,软件 单位 的 功能 不 受 
到 影响 时 , 基 类 才能 真正 被 复 用 ,而 衍生 类 可 以 在 基 类 的 基础 上 增加 新 的 行为 。 以 生活 中 的 
球 类 为 例 。 原 本 是 一 种 体育 用 品 , 它 的 衍生 类 有 篮球 足球、 排球、 羽毛 球 等 ,如 果 衍 生 类 替 
换 了 基 类 的 原本 方法 ,如 把 体育 用 品 改 成 了 食用 品 (那么 软件 单位 的 功能 受到 影响 ) ,就 不 符 
合 里 氏 代 换 原 则 。 其 目的 是 对 实现 抽象 化 的 具体 步骤 的 规范 。 

3. 依赖 倒转 原则 (Dependence Inversion Principle) 

该 原则 是 针对 接口 编程 ,而 不 是 针对 实现 编程 。 以 计算 机 系统 为 例 ,无 论 主板 .CPU、 
内 存 和 硬件 ,都 是 针对 接口 设计 的 ,如 果 针 对 实现 来 设计 ,内 存 就 要 对 应 到 针对 某 个 品牌 的 
主板 ,那么 会 出 现 更 换 内 存 时 ,需要 把 主板 也 换 掉 。 这 样 做 的 目的 是 降低 模块 间 的 耦合 。 

4. 接口 隔离 原则 (Interface Segregation Principle) 

使 用 多 个 隔离 的 接口 , 比 使 用 单个 接口 要 好 。 以 常用 登录 页 面 为 例 , 注 册 时 ,编写 用 户 
模块 的 两 个 接口 , 比 编写 成 一 个 接口 要 好 。 其 目的 是 提高 程序 设计 灵活 性 。 

5. 迪 米 特 法 则 (Demeter Principle) 

迪 米 特 法 则 也 称 为 最 少 知道 原则 。 这 个 原则 首先 是 由 美国 Northeastern University 的 
Ian Holland 在 1987 年 的 秋天 最 早 提出 的 ,后 来 被 UML 的 创始 者 之 一 Booch 等 普及 。 又 
因为 在 经 典 著作 The Pragmatic Programmer 详细 描述 ,而 广为人知 。 它 是 指 一 个 实体 应 
当 尽 量 少 地 与 其 他 实体 之 间 发 生 相 互 作用 ,使 得 系统 功能 模块 相对 独立 。 当 一 个 类 公开 的 
public 属性 或 方法 越 多 ,修改 时 涉及 面 也 就 越 大 ,变更 引起 的 风险 扩散 也 就 越 大 。 使 用 最 少 
知道 原则 目的 是 降低 类 之 间 的 耦合 ,减少 对 其 他 类 的 依赖 。 

6. 单一 职责 原则 (Single Responsibility Principle) 

该 原则 是 由 罗伯特 。C. 马丁 (Robert C. Martin) 在 《敏捷 软件 开发 : 原则 、 模 式 和 实 
践 ) 一 书 中 给 出 的 。 马 丁 表 示 此 原则 是 基于 汤姆 . 狄 马克 (Tom DeMarco) 和 Meilir Page- 
Jones 的 著作 中 的 内 聚 性 原则 发 展 而 来 的 。 它 是 指 一 个 类 只 负责 一 个 功能 领域 中 的 相应 职 
责 , 或 者 可 以 定义 为 : 就 一 个 类 而 言 , 应 该 只 有 一 个 引起 它 变化 的 原因 。 其 目的 是 降低 类 的 
复杂 性 ,提高 可 读 性 和 可 维护 性 。 

在 这 六 大 原则 中 , 开 闭 原则 是 面向 对 象 设计 的 终极 目标 。 其 他 五 条 原则 ,可 以 看 做 是 开 
闭 原则 的 实现 方法 。 设 计 模 式 就 是 实现 了 这 些 原则 ,从 而 达到 了 代码 复 用 、 增 加 了 可 维护 
性 。 在 衡量 代码 的 优 劣 时 常用 “高 内 聚 , 低 耦 合 " 作 为 标准 。 此 处 的 内 聚 是 从 功能 角度 来 度 
量 模块 内 的 联系 ,一 个 好 的 内 聚 模 块 应 当 恰好 做 一 件 事 , 它 描述 的 是 模块 内 的 功能 联系 。 耦 
合 是 软件 结构 中 各 模块 之 间 相 互 连 接 的 一 种 度量 .耦合 强 弱 取决 于 模块 设计 模式 。 


12.2 MVVM 设计 模式 概述 


随 着 软件 的 更 新 ,在 不 同 阶段 出 现 了 不 同 的 设计 模式 ,有 3 个 常用 的 设计 模式 ,它们 按 
照 时 间 出 现 的 先后 顺序 ,分别 是 MVC. MVP 和 MVVM(Model View View Model) 。 本 节 
重点 介绍 WPF 中 用 到 的 MVVM 设计 模式 。 


12.2.1 MVVM 的 由 来 
说 到 MVVM 的 由 来 ,首先 要 认识 一 下 MVC R., MVC 模式 把 用 户 界 面 交 互 分 拆 到 
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不 同 的 3 种 角色 中 ,使 应 用 程序 被 分 成 3 个 核心 部 件 , 即 Model( 模 型 )、View( 视 图) 和 
Controller( 控 制 器 ) MVC 通信 方式 如 图 12. 1 所 示 。 





Model 























Controller -——] User 


























12.1 MVC 通信 方式 


由 图 12. 1 可 知 ,MVC 的 Model, View 和 Controller 间 通 信和 方式 是 单 向 的 ,View 传送 指令 
到 Controller; Controller 完成 业务 逻辑 后 ,要 求 Model 改变 状态 ; Model 将 新 的 数据 发 送 到 
View。 接 收 用 户 指 令 时 ,MVC 可 以 分 成 两 种 方式 。 一 种 是 通过 View 接收 指令 ,传递 给 
Controller; 另 一 种 是 直接 通过 Controller 接收 指令 。MVC 3 个 核心 部 件 的 功能 和 任务 如 下 。 

(1) Model; 模型 持 有 所 有 的 数据 ,状态 和 程序 逻辑 ,模型 对 象 存 取 数 据 库 中 数据 。 模 
型 独立 于 视图 和 控制 器 。 

(2) View: 视图 用 来 呈现 模型 。 视 图 通常 直接 从 模型 中 取得 它 需 要 显示 的 状态 与 数 
据 。 对 于 相同 的 信息 可 以 有 多 个 不 同 的 显示 形式 或 视图 。 也 就 是 说 ,视图 是 依据 模型 数据 
来 创建 。 

(3) Controller; 控制 器 位 于 视图 和 模型 中 间 ,接受 用 户 的 输入 ,将 输入 进行 解析 并 反馈 
给 模型 ,通常 一 个 视图 具有 一 个 控制 器 。 控 制 器 不 能 处 理 信息 ,可 以 接受 用 户 的 请 求 并 决定 
调用 哪个 模型 部 件 去 处 理 请 求 , 然 后 再 确定 用 哪个 视图 来 显示 返回 的 数据 。 

在 MVC 设计 模式 中 ,界面 是 主导 地 位 ,因为 所 有 的 数据 全 是 通过 界面 进行 控制 。 但 
是 , 随 着 时 间 推 移 ,MVC 设计 模式 也 暴露 出 大 量 缺 点 ,因为 MVC 设计 模式 本 质 上 是 一 个 结 
构 模 式 ,结构 模式 相 比 行为 模式 而 言 , 是 静态 的 ,相对 固定 的 模式 。 随 着 B/S 和 互联 网 应 用 
不 断 的 普及 ,Web 和 社会 化 媒体 以 及 游戏 等 大 量 频 繁 交互 应 用 普及 ,相对 静止 的 MVC 设计 
模式 已 经 不 适应 高 度 交互 注重 行为 的 应 用 了 。MVP 设计 模式 应 运 而 生 了 。 

MVP 设计 模式 是 将 Controller( 控 制 器 ) 变 为 Presenter( 呈 现 器 ) ,同时 将 通信 方式 变 为 
双向 。MVP 通信 方式 如 图 12. 2 所 示 。 


Model -— Presenter e View PE User ] 
L—- 


图 12.2 MVP 通信 方式 























在 MVP 设计 模式 中 ,Presenter 把 Model 与 View 完全 分 离 ,Presenter 与 View 是 一 对 
一 的 关系 。Presenter 需要 获取 数据 ,并 更 新 界面 。 主 要 的 程序 逻辑 在 Presenter。 而 且 是 
通过 定义 好 的 接口 与 View 进行 交互 ,从 而 使 得 在 变更 View 时 可 以 保持 Presenter 的 不 变 。 
View 用 于 显示 信息 ,具有 简单 的 Set/Get 方法 ,用 户 输入 和 设置 界面 显示 的 内 容 , 不 允许 直 
接 访问 Model。 因 为 模型 与 视图 完全 分 离 ,修改 视图 而 不 影响 模型 。 将 一 个 Presenter 用 于 
多 个 视图 ,而 不 需要 改变 Presenter 的 逻辑 。 但 是 ,由 于 对 视图 的 泻 染 放 在 了 Presenter 中 ， 
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因此 视图 和 Presenter 的 交互 会 过 于 频繁 。 如 果 Presenter 过 多 地 演 染 视图 ,往往 会 使 得 它 
与 特定 的 视图 的 联系 过 于 紧密 。 一 旦 视图 需要 变更 ,那么 Presenter 也 需要 变更 了 。 这 时 
MVP 的 弱点 就 显现 出 来 了 。MVVM 设计 模式 的 出 现 ,弥补 了 MVP 设计 模式 的 不 足 。 
MVVM 是 将 MVP 设计 模式 中 的 Presenter MAH ViewModel, 与 MVP 模式 不 一 样 的 
是 ,MVVM 让 View 和 View Model 双向 数据 绑 定 。 这 使 得 ViewModel 的 状态 改变 可 以 自 
动 地 传递 给 View, 反 之 亦 然 。 在 WPF 中 ,通过 数据 绑 定 等 技术 使 得 数据 动态 更 新 变 得 简单 。 


12.2.2 MVVM 框架 


MVVM 是 微软 的 WPF 带 来 的 新 的 技术 体验 , 它 让 软件 UI 层 更 加 细节 化 、 可 定制 化 。 
在 前 面 的 章节 中 ,讨论 过 的 技术 , Binding, Dependency Property, Routed Events, 
Command DataTemplate 和 ControlTemplate, 这 些 技术 使 得 MVVM 设计 模式 得 以 实现 。 

MVVM 框架 是 MVP 与 WPF 结合 的 应 用 方式 ,是 发 展演 变 过 来 的 一 种 新 型 架构 。 它 
立足 于 原 有 MVP 框架 并 且 把 WPF 的 新 特性 业 合 进去 ,以 应 对 客户 日 益 复杂 的 需求 变化 。 
MVVM 通信 方式 如 图 12. 3 所 示 。 


Model [=—— ViewModel View User | 


12.3 MVVM 通信 方式 


MVVM 设计 模式 中 ,用 户 和 View 进行 交互 ,一 个 ViewModel 可 以 映射 多 个 View. 
由 于 View 和 ViewModel 之 间 有 双向 数据 绑 定 关系 ,使 数据 实现 动态 更 新 。 为 了 便于 读者 
的 理解 ,把 View, ViewModel 和 Model 内 部 结构 用 图 12. 4 表示 。 


See Properties/Collections/ Buttons/ListControls/ 
Generic Collections/ 
: Commands Labels 
Rest Services 


Model ViewModel View 
图 12.4 View, ViewModel, Model 内 部 结构 









































为 了 深入 地 理解 WPF 中 的 MVVM 设计 模式 使 用 的 技术 ,对 其 内 容 结构 再 进一步 说 明 
WF 

(D Model; 为 应 用 程序 提供 数据 。 其 主要 包含 Web Services, Rest Services, Generic 
Collections 。 

(2) ViewModel: 由 Properties (JRE) „Collections 4£ 4) fll Commands( 命 令 )3 个 部 分 
组 成 。 这 里 的 属性 , 指 一 个 事物 , 它 的 类 型 可 以 是 一 个 字符 型 ,也 可 以 是 一 个 对 象 。 实 现 接 
口 INotifyPropertyChanged( 属 性 变更 通知 接口 ) ,那么 任何 UI 元 素 绑 定 到 这 个 属性 ,不 管 
这 个 属性 什么 时 候 改 变 都 能 自动 地 和 UI 层 交 互 。Commands 可 以 理解 为 被 触发 的 事件 ， 
可 以 传递 一 个 类 型 为 Object 的 参数 。 但 是 前 提 是 要 实现 接口 ICommand。 

(3) View: 主要 由 3 个 部 分 组 成 。 第 一 部 分 ,把 View Model 层 的 属性 绑 定 到 Buttons 
CTextbox, Radio button, Togglebutton, MediaElement, Trigger an animation or ViewState 
change); 第 二 部 分 ,把 View Model 层 的 集合 绑 定 到 ListControls (ListBox, TreeView, 
DataGrid); 第 三 部 分 ,Commands 使 用 InvokeCommandAction 实现 这 些 行为 ( 绑 定 View 
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Model 层 的 ICommand 指出 要 实现 的 ICommand, 如 Click 事件 、Selected 事件 ,传递 参数 ) 。 
12.2.3 MVVM 的 优点 


MVVM 模式 的 主要 目的 是 分 离 视 图 (View) 和 模型 (Model) , 它 有 下 面 四 大 优点 。 

CD 低 耦 合 。 视 图 (View) 可 以 独立 于 Model 变化 和 修改 ,一 个 ViewModel 可 以 绑 定 到 
不 同 的 “View” 上 , 当 View 变化 时 ,Model 可 以 不 变 ; 当 Model 变化 时 ,View 也 可 以 不 变 。 

(2) 可 重用 性 。 开 发 人 员 可 以 把 一 些 视图 逻辑 放 在 一 个 ViewModel 中 ,让 很 多 View 
重用 这 段 视图 逻辑 。 

(3) UI 与 业务 逻辑 分 离 ,实现 独立 开发 。 开 发 人 员 可 以 专注 于 业务 逻辑 和 数据 的 开发 
(ViewModel) ,设计 人 员 可 以 专注 于 页 面 设 计 (View) ,使 用 Expression Blend 可 以 很 容易 地 
设计 界面 并 生成 XAML 代码 。 

(4) 便于 测试 。 这 里 所 说 的 测试 是 用 代码 来 进行 测试 。 对 Model、ViewModel 和 View 
单元 测试 方便 可 行 。 


12.3 基于 MVVM 的 计算 器 设计 


实践 才 是 硬 道理 。MVVM 如 此 之 好 , 那 怎么 样 的 设计 才 算 MVVM 呢 ? 本 节 将 带 着 大 
家 一 起 使 用 MVVM 模式 设计 一 款 计算 器 。 该 计算 器 简单 , 轻 量 , 却 简洁 明了 地 闸 述 了 
MVVM 的 设计 思想 。 在 这 款 计算 器 中 ,引入 加 、 减 、 乘 、 除 这 4 种 运算 功能 。 具 有 一 个 
Model .一 个 ViewModel 和 3 个 View。 并 遵循 先 编写 Model, Hitit ViewModel、 最 后 编写 
View 的 开发 步骤 。 

首先 了 解 计 算 器 的 整体 结构 ,如 图 12.5 所 示 。 在 图 12. 5 中 分 别 将 Command、Model、 
View 和 ViewModel 4 个 文件 夹 打开 后 ,其 包含 的 文件 结构 如 图 12. 6 所 示 。 


4) DelegateCommand.cs 
4 (y Model 

P CalculatorSystem.cs 
4 (a View] 


同 NER "Calculator" (1 个 项 目 ) b [ej Window Simple.xaml 
4 (O Calculator] » 国 Window Simple Blackxxaml 
b Bd Properties > [€ Window Simple3D.xaml 


> [m IR b [e] Window SimpleViewManager.xaml 
> D Command 4 (Ey ViewModel 
> D Model 4 VM Calculator.cs 
» Du View 图 VM. WindowManager.cs 
» Bg ViewModel E app.config 
EB app.config 4 [e] Appxaml 
» [e| Appxaml 





图 12.5 计算 器 整体 结构 12.6 计算 器 文件 结构 
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接 下 来 建立 Command 文件 夹 下 的 DelegateCommand. cs 文件 。 在 第 9 章 的 学 习 中 ,了 
解 到 命令 是 一 种 逻辑 约束 行为 ,使 用 方法 像 类 (封装 了 多 种 信息 ) ,可 以 在 多 个 地 方 调用 。 在 
开发 时 ,用 户 命 令 都 继承 ICommand 接口 ,并 实现 接口 的 Executed 和 CanExecute 两 个 方法 
及 CanExecuteChanged 事件 。 创 建 DelegateCommand 类 ,并 继承 自 ICommand 接口 ,CS 
代码 如 下 。 


using System; 


using System. Collections. Generic; 


using System. Ling; 

using System. Text; 

using System. Windows. Input; // 新 添加 的 引用 
namespace Calculator. Command 


( 


// 实 现 一 个 ICommand, 用 于 Button 等 UI 控件 的 命令 调用 
public class DelegateCommand : ICommand 


{ 


Action execute; // 注 册 方法 ,用 于 执行 动作 
Func < bool > canExecute; // 或 者 判断 是 否 可 执行 当前 指令 
// 构 造 函数 


public DelegateCommand(Action execute = null, Func < bool > canExecute = null) 
1 
this. execute - execute; 
this. canExecute = canExecute; 
) 
public bool CanExecute(object parameter) 
í 
if (canExecute == null) return true; 
return canExecute() ; 
) 
public event EventHandler CanExecuteChanged; 
public void UpdataCanExecuteChanged() ( 
if (CanExecuteChanged!- null) CanExecuteChanged(this, EventArgs. Empty); 
) 
public void Execute(object parameter) 
( 
if (execute == null) return; 
else execute() ; 
) 
) 


public class DelegateCommand <T> :ICommand 


{ 
Action<T> execute; 
Func <T, bool > canExecute; 
public DelegateCommand(Action.« T» execute = null, Func <T, bool» canExecute = null) 

{ 
this.execute = execute; 
this.canExecute = canExecute; 

) 

public bool CanExecute(object parameter) 

t 
if(canExecute -- null)return true; 
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return canExecute( (T) parameter) ; 


) 
public event EventHandler CanExecuteChanged; 


public void UpdataCanExecuteChanged() 
{ 
if (CanExecuteChanged!- null) CanExecuteChanged(this, EventArgs. Empty); 
) 
public void Execute(object parameter) 
{ 


if (execute == null) return; 


else execute( (T) parameter); 


) 
上 述 代 码 实现 了 ICommand 接口 。 如 果 不 理解 ,请 翻阅 本 书 9.2 节 。 


12.3.1 Model 


计算 器 的 核心 功能 就 是 计算 ,因为 此 处 开发 的 是 轻 量 级 计算 器 , 故 只 保留 了 加 \ 减 、 乘 \ 除 
4 个 基本 运算 。 在 Model 文件 夹 下 新 建 业 务 类 CalculatorSystem( 类 文件 CalculatorSystem. cs), 
这 个 类 只 有 一 个 方法 Calculator( 计 算 )。 该 Calculator 对 文本 表达 式 计 算 , 并 返回 计算 结 
果 。 本 例 所 写 出 来 Calculator 这 个 方法 即 String Calculator(String input) ,CalculatorSystem 类 
的 代码 如 下 ,代码 中 对 功能 进行 了 注释 。 


namespace Calculator. Model 
f 
public class CalculatorSystem 
{ // 用 户 自 定义 类 型 Iten, 用 于 存放 参与 运算 的 数字 及 +、- 、* 、/ 运 算 符 
class Item { 
public enum Type { Number, Symbol } 
public Type myType; 
public string src; 
public double Number { get { return double. Parse(src); } 
// 文 本 类 型 转换 成 数值 型 
set { src = value.ToString(); ) } 
// 数 值 型 变 成 文本 类 型 
} 
public static String Calculator(String input) { 
List< string» dts = new List < string>(); 
char[]sqs= (' * = 0n ', 7") 
string temp- ""; 
foreach (var v in input) ( 
if (sqs.Contains(v)) { 
dts. Add( temp) ; 
dts. Add("" + v); 


"n". 


temp-""; 
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) 
dts. Add(temp); 
List« Item» listItem- new List < Item>(); 
foreach (var v in dts) { 
Item item - new Item(); 
item. src = v; 


if (sqs. Contains(v. FirstOrDefault())) // 判 断 输入 内 容 是 数字 还 是 运算 符 


{ 

item.myType = Item. Type. Symbol; 
) 
else ( 

item. myType = Item. Type. Number; 
} 


listItem. Add( item); 
}// 用 于 计算 ,运算 规则 , 先 乘除 、 后 加 减 
for (int i=1; i< listItem. Count; i+=2) { 
if (listItem[i]. src=="*") { // 乘 法 运算 
listItem[i- 1].Number *- listItem[ i + 1]. Number; 
listItem[i].src- " +"; 
listItem[i-* 1].src- "0"; 
) 
if (listIten[i].src == "/") // 除 法 运算 
listItem[i- 1]. Number /= listItem[i+1].Number; 
listIten[i].src- " * "; 
listItem[i-* 1].src- "0"; 
) 
) 
double ret = listItem[0]. Number; 
for (int i=1; i< listItem. Count; i*-2) ( 
if (listIten[i].src-- " *") ( // 加 法 运算 
ret += listItem[i-* 1]. Number; 
) 
if (listItem[i].src-- "- ") // 减 法 运算 
{ 
ret -= listlItem[i + 1]. Number; 
) 
) 
return ret. ToString(); ; 


12.3.2  ViewModel 


ViewModel 文件 夹 下 包含 VM_Calculator. cs 和 VM. WindowManager. cs 两 个 类 文 
件 。 其 中 VM_Calculator. cs 类 继承 INotifyPropertyChanged( 属 性 变更 通知 接口 ) ,在 该 类 
中 创建 一 个 名 为 UpdateProperty () 的 包装 函数 ,其 功能 是 实现 属性 变更 通知 。 在 


第 12 € | MVVM 设计 模式 





ViewModel 文件 夹 下 建 类 VM Calculator. cs ,代码 如 下 。 


using System. ComponentModel; 
namespace Calculator. ViewModel 
{ 
public class VM Calculator : INotifyPropertyChanged 
{ 
public event PropertyChangedEventHandler PropertyChanged; 
public void UpdateProperty(String propertyName) 
{ 
PropertyChanged. Invoke(this, new PropertyChangedEventArgs(propertyName)); } 
// 输 出 
string outputString; 
public string OutputString 


í 
get { return outputString; } 
set { outputString = value; } 
} 
// 输 入 


string inputString; 
public string InputString 
{ 
get { return inputString; } 
set { inputString = value; } 
} 
void doInput(string ch) 
{ 
if (ch=="=") 
{ 
outputString = CalculatorSystem. Calculator( inputString); 


UpdateProperty("InputString"); // 属 性 改变 更 新 界面 
UpdateProperty("OutputString"); // 属 性 改变 更 新 界面 
inputCommand. UpdateCanExecuteChanged() ; // 属 性 改变 能 否 执行 命令 
) 
else( 
inputString += ch; // 添 加 字符 串 
UpdateProperty("InputString"); // 属 性 改变 更 新 界面 
inputCommand. UpdateCanExecuteChanged(); // 属 性 改变 更 新 界面 


) 

bool isNumber(string ch) 

{ 
string[ ] chs={ "1", "2", "3", "4", "5", "6", "7", "8", "9", "O" ); 
return chs. Contains(ch); 


) 

bool isSymbol(string ch) 

i 
string[]chse[ "4 *, "—", "a *, "I" ); 
return chs. Contains(ch); 
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bool canInput(string ch) 
{ 
string lastch- null; 
if (inputString!- null) lastch- "" + inputString. LastOrDefault(); 
if (isSymbol(lastch) && isSymbol(ch))return false; // 符 号 后 面 不 能 接 符号 
if (isSymbol(lastch) && ch=="=") return false; // 符 号 后 面 不 能 接 符 号 
return true; } 
DelegateCommand < string» inputCommand = null; 
public ICommand InputCommand 
{ 
get 
( 
if (inputCommand = = null) inputCommand = new DelegateCommand < string > 
(doInput, canInput); 
return inputCommand; 
) 
} 
CalculatorSystem calculatorSystem; 
public CalculatorSystem CalculatorSystem ( 
get ( return calculatorSystem; } 
set ( calculatorSystem = value; } 


} 


上 述 代码 实现 了 INotifyPropertyChanged。 如 果 不 理 解 , 请 翻阅 本 书 5.3.3 节 。 

在 此 , 先 来 回顾 ViewModel 的 作用 , 它 连接 着 View 和 Model, 将 用 户 在 View 中 输入 
的 数据 传递 给 Model. Model 对 数据 处 理 完 成 ,产生 的 输出 结果 反馈 给 ViewModel， 
ViewModel 再 返回 到 View 中 。 由 此 可 知 , ViewModel 中 需要 处 理 输入 数据 (string 
inputString) ,输出 数据 (string outputString) 、 对 输入 数据 的 合法 性 校 验方 法 (bool canInput 
(string ch) ,如 符号 后 面 不 能 接 符号 , View 上 的 按钮 是 否 可 用 )、 数 据 导 入 方法 (void 
dolnput(string ch) , 当 单 击 View 中 的 按钮 后 ,通过 此 方法 将 数据 导入 Model) 、 命 令 绑 定 
(Command InputCommand ,将 View 上 的 按钮 单 击 事件 转化 为 调用 doInput 方法 ) .属性 变 
更 通知 (在 ViewModelBase 类 中 实现 创建 一 个 名 为 UpdateProperty() 的 包装 函数 ) 。 

接 下 来 介绍 VM_WindowManager. cs。 该 类 负责 管理 View 中 的 4 个 窗口 ,可 以 实现 
4 个 窗 体 的 显示 和 隐藏 功能 ,该 类 的 CS 代码 如 下 。 


using Calculator. Command; 
using System; 
using System. Collections. Generic; 
using System. Ling; 
using System. Text; 
using System. Windows; 
using System. Windows. Input; 
namespace Calculator. ViewModel 
{ 

class VM WindowManager 

{ BOR 
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public Window[] views = new Window[4]; 

bool[] Showings = newbool[4]; 

public void ShowAllView() 

{ 
views[0].Show(); Showings[0] = true; 
views[1]. Show(); Showings[1] = true; 
views[2]. Show(); Showings[2] = true; 
views[3]. Show(); Showings[3] = true; 
showWindowCommand. UpdataCanExecuteChanged( ); 
hideWindowCommand. UpdataCanExecuteChanged( ); 


} 
bool canShowWindow(string index) 
i 
int i= int.Parse(index); 
return! Showings[i]; 
) 


bool canHideWindow(string index) 
í 
int i= int. Parse( index); 
return Showings[ i]; 
) 
void doShowWindow(string index) 
t 
int i= int.Parse(index); 
views[i].Show(); 
Showings[i] = true; 
showWindowCommand. UpdataCanExecuteChanged( ) ; 
hideWindowCommand. UpdataCanExecuteChanged( ) ; 
) 
void doHideWindow(string index) 
( 
int i= int.Parse(index); 
if (i773) 
( 
var rs = MessageBox. Show(" 关 掉 此 窗口 后 将 无 法 管理 所 有 窗口 是 否 关 闭 ?"，" 警 告 "， 
MessageBoxButton. YesNo) ; 
if (rs == MessageBoxResult. No) return; 
) 
views[i].Hide(); 
Showings[i] = false; 
showWindowCommand. UpdataCanExecuteChanged() ; 
hideWindowCommand. UpdataCanExecuteChanged() ; 
) 
DelegateCommand < string > showWindowCommand = null; 
public ICommand ShowWindowCommand 
1 
get 
{ 
if (showWindowCommand = = null) showWindowCommand = new DelegateCommand 
< string»(doShowWindow, canShowWindow); 
return showWindowCommand; 





DelegateCommand < string> hideWindowCommand = null; 
public ICommand HideWindowCommand 


get 
{ 
if (hideWindowCommand = = null) hideWindowCommand = new DelegateCommand 
< string»(doHideWindow, canHideWindow); 
return hideWindowCommand; 


12.3.3 View 


View 是 通常 意义 上 的 UI。 虽 然 人 们 对 美的 认 知 不 尽 相同 ,但 是 在 UI 设计 时 ,需要 遵 
循 3C 原则 , 即 Concise( 页 面 简洁 )、Consistence( 数 据 的 一 致 性 ) „Contrast R} HERE) 。 

鉴于 页 面 设计 中 的 在 3C 原则 ,在 View 文件 夹 下 创建 4 个 XAML 文件 ,这 4 个 XAML 
文件 分 别 对 应 4 个 不 同 的 视图 。Window_Simple. xaml 是 普通 视图 、Window_Simple_ 
Black. xaml 是 黑色 背景 视图 、Window _ Simple3D. xaml 是 3D 视图 窗口 、 Window _ 
SimpleViewManager. xaml 是 管理 上 述 3 个 视图 的 管理 视图 。 

计算 器 View 中 的 按钮 形状 ,可 以 是 矩形 ,也 可 以 是 椭圆 形 。 分 析 计 算 器 上 的 控件 ,有 
Button, TextBox 和 Label 3 种 类 型 。 其 中 Button. 又 可 分 为 输入 数据 和 输入 运算 符 两 种 。 
TextBox 用 于 接收 输入 数据 ,Label 用 于 显示 输出 的 运算 结果 。 将 所 有 的 Button 绑 定 到 命 
令 InputCommand, 但 对 应 的 命令 参数 不 同 。 将 TextBox 绑 定 到 输入 字符 串 InputString。 
将 Label 绑 定 到 输出 字符 串 OutputString。 在 下 文中 对 Window_Simple. xaml 的 代码 给 出 
注释 ,其 余 窗口 相似 ,请 读者 注释 。 按 照 编 码 的 顺序 逐一 列 出 这 4 个 文件 的 CS 代码 。 

(1) Window. Simple. xaml 文件 的 代码 如 下 。 


« Window x:Class = "Calculator. View. Window Simple" 
xmlns = "http://schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x = "http: //schemas. microsoft. com/winfx/2006/xaml" 
Title = "Window Simple" Height = "300" Width = "300" > 
«Grid» 
<! —- TextBox 输入 框 绑 定 到 输入 字符 串 InputString-- > 
«TextBox Height = "37" HorizontalAlignment = "Left" Margin = "12,12, 0,0" Name = 
"textBoxl" VerticalAlignment = "Top" Width = "276" Text = "(Binding InputString]" /> 
<! -- Label 输出 框 绑 定 到 输出 字符 串 OutputString--» 
«Label Height = "38" HorizontalAlignment = "Left" Margin = "195,55,0,0" Name = "label1" 
VerticalAlignment = "Top" Width = "77" Content = " {Binding OutputString)"/» 
«Grid Height = "204" HorizontalAlignment = "Left" Margin = "12,55,0,0" Name = "wrapPanell" 
VerticalAlignment = "Top" Width = "178" 
<! -- 数 字 按 钮 "1" 绑 定 到 命令 InputCommand 命令 参数 为 "1" --> 
«Button Content = "1" Height = "41" Name = "m1" Width = "53" Margin = "6,16,118, 
147" Command = "(Binding InputCommand]" CommandParameter = "1" /> 
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«Button Content = "2" Height = "41" Name = "m2" Width = "53" Margin = "62, 16, 62, 
147" Command = "(Binding InputCommand)" CommandParameter = "2" /> 
«Button Content = "3" Height = "41" Name = "m3" Width = "53" Margin = "118, 16,6, 
147" Command = "(Binding InputCommand]" CommandParameter = "3" /> 
«Button Content = "4" Height = "41" Name = "m4" Width = "53" Margin = "6, 62, 118, 
101" Command = "(Binding InputCommand]" CommandParameter = "4" /> 
«Button Content = "5" Height = "41" Name = "m5" Width = "53" Margin = "62, 62, 62, 
101" Command = "(Binding InputCommand)" CommandParameter = "5" /> 
«Button Content = "6" Height = "41" Name = "m6" Width = "53" Margin = "118,62,6, 
101" Command = "(Binding InputCommand])" CommandParameter = "6" /> 
«Button Content = "7" Height = "41" Name = "m7" Width = "53" Margin = "6,109,118, 
54" Command = "(Binding InputCommand)" CommandParameter = "7" /> 
«Button Content = "8" Height = "41" Name = "m8" Width = "53" Margin = "62,109,62, 
54" Command = "(Binding InputCommand)" CommandParameter = "8" /> 
«Button Content = "9" Height = "41" Name = "m9" Width = "53" Margin = "118, 108,6, 
55" Command = "(Binding InputCommand)" CommandParameter = "9" /> 
«Button Content = "0" Height = "41" Name = "m0" Width = "53" Margin = "63,155,61,8" 
Command = "(Binding InputCommand)" CommandParameter = "0" /> 
«/Grid» 
«WrapPanel Height = "160" HorizontalAlignment = "Left" Margin = "203,99,0,0" Name = 
"wrapPanel2" VerticalAlignment = "Top" Width = "69" 
«Button Content =" +" Height = "30" Name = "buttonlO" Width = "68" Command = "(Binding 
InputCommand)" CommandParameter = " +" /> 
«Button Content =" - ”Height = "30" Name = "buttonll" Width = "68" Command = "(Binding 
InputCommand)" CommandParameter = "- " /> 
«Button Content = "x" Height = "30" Name = "button12" Width = "68" Command = "(Binding 
InputCommand)" CommandParameter = "* " /> 
«Button Content = "/" Height = "30" Name = "buttonl3" Width = "68" Command = "(Binding 
InputCommand)" CommandParameter = "/" /> 
«Button Content = " = " Height = "30" Name = "buttonl4" Width = "68" Command = "(Binding 
InputCommand)" CommandParameter = "- " /> 
«/WrapPanel > 
«/Grid» 
«/ Window» 
























(2) Window. Simple Black. xaml 文件 的 代码 如 下 。 


« Window x:Class = "Calculator. View. Window_Simple Black" 
xmlns = "http://schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x = "http: //schemas. microsoft. com/winfx/2006/xaml" 
Title = "Window Simple Black" Height = "300" Width = "300" Background = " # FF101010"> 
<Grid> 
< TextBox Height = "37" HorizontalAlignment = "Left" Margin = "12,12,0,0" 
Name = "textBoxl" VerticalAlignment = "Top" Width = "178" 
Text = "(Binding InputString])" /> 
< Label Height = "38" HorizontalAlignment = "Left" Margin = "195,12,0,0" 
Name = "labell" VerticalAlignment = "Top" Width = "77" 
Content = " {Binding OutputString}" Background = "White" /> 
<Grid Height = "204" HorizontalAlignment = "Left" Margin = "12, 55, 0, 0" Name = "wrapPanel1" 
VerticalAlignment = "Top" Width = "178"> 
<Button Content = "1" Height = "41" Name = "ml" Width = "53" Margin = "6, 16, 118, 147" 
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Command = "(Binding InputCommand]" 
CommandParameter = "1" Background = " # FF969696" /> 
«Button Content = "2" Height = "41" Name = "m2" Width = "53" Margin = "62, 16, 62, 
147" Command = "(Binding InputCommand]" CommandParameter = "2" Background = 
"4 FF969696" /> 
«Button Content = "3" Height = "41" Name = "m3" Width = "53" Margin = "118, 16,6, 
147" Command = "(Binding InputCommand]" CommandParameter = "3" Background = 
" £ FF969696" /> 
«Button Content = "4" Height = "41" Name = "m4" Width = "53" Margin = "6,62,118, 
101" Command = "(Binding InputCommand]" CommandParameter = "4" Background = 
" £ FF969696" /> 
«Button Content = "5" Height = "41" Name = "m5" Width = "53" Margin = "62, 62, 62, 
101" Command = "(Binding InputCommand]" CommandParameter = "5" Background = 
" & FF969696" /> 
«Button Content = "6" Height = "41" Name = "m6" Width = "53" Margin = "118,62,6, 
101" Command - "(Binding InputCommand]" CommandParameter - "6" Background - 
" # FF969696" /> 
«Button Content = "7" Height = "41" Name = "m7" Width = "53" Margin = "6,109,118, 
54" Command = "(Binding InputCommand]" CommandParameter = "7" Background = 
" # FF969696" /> 
«Button Content = "8" Height = "41" Name = "m8" Width = "53" Margin = "62,109,62, 
54" Command = "(Binding InputCommand]" CommandParameter = "8" Background = 
"$ FF969696" /> 
«Button Content = "9" Height = "41" Name = "m9" Width = "53" Margin = "118, 108,6, 
55" Command = "(Binding InputCommand]" CommandParameter = "9" Background = 
"i$ FF969696" /> 
«Button Content = "0" Height = "41" Name = "m0" Width = "53" Margin = "63,155,61,8" 
Command = " (Binding InputCommand]" CommandParameter = " 0" Background = 
"$ FF969696" /> 
«/Grid» 
«WrapPanel Height = "160" HorizontalAlignment = "Left" Margin = "203,99,0,0" Name = 
"wrapPanel2" VerticalAlignment = "Top" Width = "69" 
«Button Content =" +" Height = "30" Name = "buttonlO" Width = "68" Command = 
"(Binding InputCommand)" CommandParameter =" +" Background = " # FFOOFFB1" /> 
«Button Content =" —" Height = "30" Name = "buttonll" Width = "68" Command = 
"(Binding InputCommand)" CommandParameter = " —" Background = " # FFO0FFB1" /> 
«Button Content = "x" Height = "30" Name = "buttonl2" Width = "68" Command = 
"(Binding InputCommand]" CommandParameter =" * " Background = " # FFO0FFB1" /> 
«Button Content = "/" Height = "30" Name = "button13" Width = "68" Command = 
"(Binding InputCommand]" CommandParameter = "/" Background = "it FFOOFFB1" /> 
«Button Content =" =" Height = "30" Name = "buttonl4" Width = "68" Command = 
"(Binding InputCommand]" CommandParameter = " = " Background = " # FF18FF03" /> 
«/WrapPanel > 
«/Grid» 
«/lindow 





(3) Window Simple3D. xaml 的 代码 如 下 。 


< Window x:Class = "Calculator. View.Window Simple3D" 
xmlns = "http://schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x- "http://schemas. microsoft. com/winfx/2006/xaml" 
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Title= "Window_Simple3D" Height = "300" Width= "300"> 
<Grid> 
<TextBox Height = "37" HorizontalAlignment = "Left" Margin = " 12, 12, 0, 0" Name = 
"textBoxl" VerticalAlignment = "Top" Width = "254" Text = "(Binding InputString}" /> 
<Label Height = "38" HorizontalAlignment = "Left" Margin = "195,55,0,0" Name = "labell" 
VerticalAlignment = "Top" Width- "71" Content = "(Binding OutputString]"/» 
«Viewport3D x:Name = "view" ClipToBounds = "True" RenderOptions. EdgeMode = "Aliased" 
HorizontalAlignment = "Left" Width = "288"» 
< Viewport3D. Camera > 
«PerspectiveCamera x: Name = "perspectiveCam" FieldOfView = "59" Position = 
"0.5,0,2" LookDirection- "0,0.4, -1"> 
«/PerspectiveCamera > 
«/Viewport3D. Camera > 
< ModelVisual3D-» 
< ModelVisual3D. Content > 
< AnbientLight Color = "White" /> 
«/ModelVisual3D. Content » 
«/ModelVisual3D 
< Viewport2DVisual3D > 
< Viewport2DVisual3D. Material > 
« DiffuseMaterial Viewport2DVisual3D. IsVisualHostMaterial = "True" 
Brush 7 "White"/> 
«/Niewport2DVisual3D. Material» 
< Viewport2DVisual3D. Geometry > 
< MeshGeonetry3D Positions = "0,1,0 0,0,0 1,0,0 1,1,0" 
TextureCoordinates - "0,0 0,1 1,1 1,0" 
TriangleIndices - "012 023"/» 
«/Niewport2DVisual3D. Geometry > 
«Grid» 
«Grid Height = "204" HorizontalAlignment = "Left" Margin = "12, 55, 0, 0" 
Name = "wrapPanell" VerticalAlignment = "Top" Width = "178"> 
«Button Content = "1" Height = "41" Name = "m1" Width = "53" Margin = 
"6,16,118,147" Command = "(Binding InputCommand}" CommandParameter = 
e a 
<Button Content = "2" Height = "41" Name = "m2" Width = "53" Margin = 
"62,16,62, 147" Command = "(Binding InputCommand)" CommandParameter = 
"2" 5. 
«Button Content = "3" Height = "41" Name = "m3" Width = "53" Margin = 
"118,16,6,147" Command = "(Binding InputCommand])" CommandParameter = 
*3* f5 
«Button Content = "4" Height = "41" Name = "m4" Width = "53" Margin = 
"6,62,118,101" Command = "(Binding InputCommand]" CommandParameter = 
"4n f^ 
«Button Content = "5" Height = "41" Name = "m5" Width = "53" Margin = 
"62,62,62, 101" Command = "(Binding InputCommand)" CommandParameter = 
"5" [^ 
«Button Content = "6" Height = "41" Name = "m6" Width = "53" Margin = 
"118,62,6,101" Command = "(Binding InputCommand)" CommandParameter = 
"e" /> 
«Button Content = "7" Height = "41" Name = "m7" Width = "53" Margin = 
"6,109,118,54" Command = "(Binding InputCommand)" CommandParameter = 
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«Button Content = "8" Height = "41" Name = "n8" Width = "53" Margin = 
"62,109,62,54" Command = "(Binding InputCommand]" CommandParameter = 
"8" /> 

«Button Content = "9" Height = "41" Name = "m9" Width = "53" Margin = 
"118,108,6,55" Command = "(Binding InputCommand]" CommandParameter = 
"9" /> 

«Button Content = "0" Height = "41" Name = "m0" Width = "53" Margin = 

3,155, 61, 8" Command = "(Binding InputCommand]" CommandParameter = 








<WrapPanel Height = "160" HorizontalAlignment = "Left" Margin = "203,99, 
0,0" Name = "wrapPanel2" VerticalAlignment = "Top" Width = "69"> 
<Button Content =" +" Height = "30" Name = "button10" Width = "68" 
Command = "(Binding InputCommand}" CommandParameter = " +" /> 
«Button Content =" -" Height = "30" Name = "buttonll" Width = "68" 
Command = "(Binding InputCommand}" CommandParameter ="—" /> 
«Button Content = "x" Height = "30" Name = "button12" Width = "68" 
Command = "(Binding InputCommand}" CommandParameter = " x " /> 
«Button Content = "/" Height = "30" Name = "button13" Width = "68" 
Command = " {Binding InputCommand}" CommandParameter = "/" /> 
«Button Content = " =" Height = "30" Name = "button14" Width = "68" 
Command = "(Binding InputCommand]" CommandParameter = " = " /> 
</WrapPanel > 
</Grid> 
</Viewport2DVisual3D> 
</Viewport3D> 
</Grid> 
</Window> 








(4) Window_SimpleViewManager. xaml 文件 的 代码 如 下 。 


« Window x:Class = "Calculator. View. Window SimpleViewManager" 

xmlns = "http://schemas. microsoft. com/winfx/2006/xaml/presentation" 

xmlns:x- "http: //schemas. microsoft. com/winfx/2006/xaml" 
Title = "Window SimpleViewManager" Height = "305" Width = "357"» 
< Grid Height = "236" Width = "312" 

«Button Content - "Hide Simple Window" Height - "23" HorizontalAlignment - "Right" 
Margin- "0,12,4,0" Name = "buttonl" VerticalAlignment = "Top" Width = "146" Command = 
"(Binding HideWindowCommand)" CommandParameter = "0" /> 

«Button Content = "Hide Black Window" Height = "23" HorizontalAlignment = "Left" Margin 
7"162,41,0,0" Name = "button2" VerticalAlignment = "Top" Width = "146" Command = 

"(Binding HideWindowCommand)" CommandParameter = "1" /> 

«Button Content = "Hide 3D Window" Height = "23" HorizontalAlignment = "Left" Margin 
7"162, 70, 0, 0" Name = "button3" VerticalAlignment = "Top" Width = "146" Command = 

"(Binding HideWindowCommand)" CommandParameter = "2" /> 

«Button Content - "Hide Manager Window" Height - "23" HorizontalAlignment - "Right" 
Margin = "0,99,4,0" Name = "button4" VerticalAlignment = "Top" Width = "146" Command = 
"(Binding HideWindowCommand)" CommandParameter = "3" Click = "button4 Click" /> 

«Button Content = "Show Simple Window" Height = "23" HorizontalAlignment = "Left" 
Margin =" 10, 12, 0, 0" Name = " button5" VerticalAlignment = "Top" Width = "146" 
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Command = " (Binding ShowWindowCommand}" CommandParameter = "0" /> 
«Button Content = "Show Black Window" Height = "23" HorizontalAlignment = "Left" Margin = 
"10,41,0, 0" Name = "button6" VerticalAlignment = " Top" Width = "146" Command = 
"(Binding ShowWindowCommand]" CommandParameter = "1" /> 
«Button Content = "Show 3D Window" Height = "23" HorizontalAlignment = "Left" Margin = "10, 
0,0,143" Name = "button7" VerticalAlignment = " Bottom" Width = "146" Command = 
"(Binding ShowWindowCommand]" CommandParameter = "2" /> 
«Button Content = "Show Manager Window" Height = "23" HorizontalAlignnent = "Left" 
Margin = "10, 99, 0, 0" Name = "button8" VerticalAlignment = " Top" Width = "146" 
Command = " (Binding ShowWindowCommand])" CommandParameter = "3" /> 
«/Grid» 
</Window > 


当 运 行 该 计算 器 时 ,4 个 视图 窗 体 全 部 显示 在 页 面 上 ,如 图 12.7 所 示 。 在 图 12.7 中 的 
Window. Simple 窗 体 输入 “125 * 521 一 ”时 ,其 余 两 个 计算 器 视图 呈现 的 数据 始终 与 其 保持 
一 致 ,如 图 12.8 所 示 。 





而 Window Simple. 





















图 12.7 计算 器 运行 初始 化 效果 





65125 








图 12.8 计算 器 工作 页 面 效果 


要 求 View 文件 夹 下 的 4 个 窗 体 同时 显示 ,需要 设置 App. xaml 的 Startup 属性 ,App 
. xaml 文件 内 容 如 下 。 


< Application x:Class = "Calculator. App" 
xmlns = "http: //schemas. microsoft. com/winfx/2006/xaml/presentation" 
xmlns:x = http://schemas. microsoft. com/winfx/2006/xaml 
Startup = "Application_Startup"> 
< Application. Resources > 
</Application. Resources > 
</Application> 


App. xaml. cs 代码 如 下 。 
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namespace Calculator 
{ 

///« summary> 

/// App. xaml 的 交互 逻辑 

Ihe summary? 

public partial class App : Application 

{ 

private void Application Startup(object sender, StartupEventArgs e) 
{ 

// 创 建 计算 器 View 
Window Simple window Simple = new Window Simple(); 
Window Simple3D window Simple3D - new Window Simple3D(); 
Window Simple Black window Simple Black = new Window Simple Black(); 
// 创 建 计算 器 ViewModel 
VM Calculator vm calculator = new VM Calculator(); 
// 创 建 计算 器 Model 
CalculatorSystem model = new CalculatorSystem(); 
// 将 Model 5j ViewModel 连接 
vm calculator.CalculatorSystem = model; 
// 将 ViewModel 5j View 连接 
window Simple.DataContext = vm calculator; 
window Simple3D.DataContext = vm calculator; 
window Simple Black. DataContext = vm calculator; 
// 创 建 管理 View 
Window SimpleViewManager manager = new Window SimpleViewManager(); 
// 创 建 管理 ViewModel 
VM WindowManager vm WindowManager = new VM WindowManager(); 
// 将 ViewModel 与 View 连接 
manager. DataContext = vm WindowManager; 
// 由 于 这 个 vn. WindowManager 非常 简单 因此 直接 用 ViewModel 实现 逻辑 
vm WindowManager.views[0] = window Simple; 
vm WindowManager.views[1] = window Simple3D; 
vm WindowManager.views[2] = window Simple Black; 
vm WindowManager. views[3] = manager; 
manager. Show( ) ; // 显 示 管 理 器 界面 
vm WindowManager. ShowAllView(); // 显 示 所 有 界面 


} 


细心 的 读者 会 发 现 ,这 个 计算 器 的 启动 窗 体 不 是 MainWindow。 在 此 ,解释 一 下 WPF 
WAO., R WPF 默认 启动 窗 体 是 MainWindow ,但 WPF 的 入 口 是 App. xaml 中 的 App 
X., WPF 程序 的 编译 过 程 如 下 所 述 。 

WPF 程序 的 编译 时 ,首先 检测 是 否 有 App. xaml 文件 ,如 果 有 App. xaml 文件 , 则 在 
App. xaml 编译 出 来 的 CS 文件 (CS 文件 的 相对 路 径 : ……\obji\Debug\App. g. cs) 中 ,添加 
以 下 入口 。 


/// < summary> 
/// Application Entry Point. 
/// </summary> 
[System. STAThreadAttribute()] 
[System. Diagnostics. DebuggerNonUserCodeAttribute()] 
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[System. CodeDom. Compiler. GeneratedCodeAttribute( "PresentationBuildTasks", "4.0.0.0")] 
public static void Main() { 

WpfApplication3. App app = new WpfApplication3. App(); 

app. InitializeComponent(); 

app. Run(); 
) 

由 上 述 代码 可 知 , WPF 程序 的 进入 方式 是 : 首先 ,找到 Maino ,然后 执行 Main() 中 的 
app.Run()。 其 中 ,app 的 属性 StartupUri 中 的 值 即 启动 对 象 , 因 为 前 面 章节 所 有 的 程序 中 
*StartupUri— "MainWindow. xaml"”, 所 以 都 是 把 MainWindow 作为 启动 该 窗 体 。 但 是 在 
本 章 的 程序 中 ,StartupUri 王 "Application_Startup"”, 故 运行 其 相应 的 代码 。 


12.4 基于 MVVM 设计 思想 


上 面 采 用 MVVM 设计 模式 实现 了 计算 器 的 功能 。 但 实际 中 又 该 如 何 去 套 用 MVVM 
设计 模式 呢 ? 接 到 一 个 项 目 时 ,首先 划分 Model, View 和 ViewModel 结构 。Model 负责 数 
据 处 理 业务 ,在 本 节 的 计算 器 中 数据 处 理 就 是 加 、 减 , 乘 和 除 运算 。ViewModel 连接 着 
Model 和 View, 所 以 这 里 既 有 对 输入 数据 的 处 理 ,又 有 对 输出 数据 的 显示 。View 呈现 用 户 
多 样 的 显示 需求 。 

当然 ,实现 MVVM 设计 模式 需要 用 到 WPF 中 的 各 种 技术 。 设 计 Model 业务 逻辑 时 ， 
用 到 面向 对 象 的 开发 经 验 , 因 为 这 里 是 简单 的 数据 计算 ,并 未 涉及 数据 库 。 目 前 大 多 数 项 目 
基本 上 都 会 用 到 数据 库 访 问 技术 。ViewModel 作为 数据 通道 ,通过 INotifyPropertyChanged 确 
保 数据 的 一 致 性 。 通 过 CommandBinding 将 View 上 的 按钮 单 击 事件 转化 为 调用 doInput 
方法 。View 作为 与 用 户 的 交互 窗口 , 摆 放 各 种 UI 控件 ,其 中 Button, TextBox 和 Label 这 
3 种 控件 类 型 使 用 频率 最 高 。TextBox 输入 框 绑 定 到 输入 字符 串 InputString; Label 输出 
框 绑 定 到 输出 字符 串 OutputString; Button 按钮 绑 定 到 命令 InputCommand。 图 12. 9 fifi 
述 了 MVVM 设计 思想 。 
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图 12. 9 表示 了 MVVM 设计 模式 、 数 据 流 及 WPF 核心 技术 这 三 者 的 关系 。 在 项 目 开 
发 中 ,学 会 利用 MVVM 设计 模式 去 思考 问题 ,使 用 设计 模式 简化 项 目 开销 ,可 起 到 事 半 功 
倍 的 效果 。 同 时 ,还 应 该 从 软件 工程 管理 角度 来 开发 项 目 , 并 遵行 下 面 的 步骤 。 

(1) 项 目的 需求 。 分 析 项 目 中 涉及 的 各 种 数据 ,并 将 这 些 数 据 分 成 输入 数据 和 输出 数 
据 ; 同时 分 析 系统 必 备 的 功能 。 

(2) 划分 结构 、 分 层 设 计 。 这 里 的 结构 正 对 应 着 MVVM 设计 模式 。 

(3) 分 类 管理 项 目 文件 。 创 建文 件 夹 存放 不 同类 型 文件 ,便于 后 期 维护 。 

(4) 创建 用 户 自 定义 类 ,可 以 继承 系统 的 接口 ,并 实现 其 功能 。 

CO 熟悉 常用 的 接口 。 例 如 ,WPF 中 的 INotifyPropertyChanged 和 ICommand。 

(6) 掌握 开发 技术 。 例 如 ,WPF 中 的 DataBinding 和 RoutedEvent。 


12.5 小 结 


本 章 从 软件 设计 模式 的 起 源 、 概 念 和 原则 讲 起 ,剖析 了 设计 模式 的 发 展 过 程 。 对 比 
MVC、MVP 和 MVVM 3 种 设计 模式 的 通信 方式 的 差别 ,重点 介绍 了 MVVM 设计 模式 的 
框架 、 其 三 大 组 件 内 容 结构 及 该 模式 的 优点 。 并 用 基于 MVVM 模式 的 计算 器 实例 说 明 
WPF 的 技术 的 优势 所 在 ,阐明 基于 MV VM 模式 设计 时 的 思考 方法 和 项 目 开发 步 又。 
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1. 简 述 设计 模式 的 设计 概念 及 设计 原则 。 

2. 对 比分 析 MVC、MVP、MVVM 3 种 设计 模式 的 通信 方式 的 差别 。 

3. 了 解 MVVM 设计 模式 的 设计 框架 , 简 述 MVVM 设计 模式 的 优点 。 

4. 设计 一 款 基于 MVVM 设计 模式 的 计算 器 ,该 计算 器 启动 以 后 ,输入 “12. 3 * 6” 后 ， 
页 面 显示 效果 如 图 12. 10 所 示 。 
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12.10 基于 MVVM 的 计算 器 


设计 提示 : 椭圆 运算 符 按钮 用 控件 模板 的 思想 实现 ; 粉色 运算 符 按钮 用 静态 资源 实 
现 ; 本 题 与 本 章 中 的 MVVM 计算 器 相 比 ,多 一 个 小 数 点 和 退 格 键 ,注意 在 代码 中 加 入 业务 
3E. 
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